How can I pass an array as Input() from the component template?

angular angular2-template

Thorsten Westheider · Jul 4, 2016 · Viewed 63.9k times · Source

I need to pass an array of values to a component using binding, e.g.

@Component({
    selector: 'my-component',
    template: '<div data="[1, 2, 'test']"></div>
})
export class MyComponent {
    @Input() data: any[];
    ...
}

However, it seems Angular treats this as string/string[1] (in the actual project the array is a route and I need to pass this route on to a component which has the [routerLink] directive).

How do I go about this?

Answer

You need to wrap the property with [] otherwise it is not processed by Angular at all:

[data]="[1, 2, 'test']"

Your example seems to set data from inside the component. This is not how binding works. What you can do with your component is <my-component [data]="[1, 2, 'test']"></my-component> to pass data from the outside to your component.

How can I pass an array as Input() from the component template?

Answer

Related questions