54

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?

Thorsten Westheider
  • 10,572
  • 14
  • 55
  • 97

3 Answers3

98

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.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
12

So lets's start from here... in Angular 2+ all input will pass down a string if they don't get brackets around...

So there are 2 ways to pass down your values...

if you write it like this: '<div data="[1, 2, 'test']"'

you basically get it as "[1, 2, 'test']" (as string)...

The way you doing is a good way for passing down strings, and you can also use interpolation and mix it with javascript before passing it down like 'Angular {{version}}'

So to pass it down as an Array or any javascript none-sting value, you need to use [] around your input like this...

<div [data]="[1, 2, 'test']"></div>
Alireza
  • 100,211
  • 27
  • 269
  • 172
1

Normally you only use input when the component is nested within another component.

So in another component, something like: <my-component [data]= ...>

DeborahK
  • 57,520
  • 12
  • 104
  • 129