Bind @Input() field in components template

Question

I have a component like this:

@Component({ selector: 'foo', template: '<h1>{{bar}}</h1>' }) export class FooComponent { @Input() bar: string; }

Now I'd like to use this component somewhere else (assuming everything is correctly configured):

<foo [bar]="Test"></foo>

The output is:

<h1></h1>

Do you know why? Why can't a @Input() field be bound in it's components template?

Version: Angular 2.0 Final Release

Günter Zöchbauer · Accepted Answer · 2016-09-27 09:35:02Z

It should be

<foo [bar]="'Test'"></foo>

or

<foo bar="Test"></foo>

otherwise the value of property Test of the parent component will be assigned, which is probably undefined.

1 Answer 1