Angular 2 Component @Input not working
You have four things that I can note :
- You are passing an input in the root component, which will not work.
- As @alexpods mentioned, you are using CamelCase. You should not.
- You are passing an expression instead of an string through
[test]
. That means that angular2 is looking for a variable namedBlue32
instead of passing a raw string. - You are using the constructor. That will not work, it must be after the
view has been initializeddata-bound properties have been initialized (see docs for OnInit).
So with a few fixes it should work
Example updated to beta 1
import {Component, Input} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
@Component({
selector : 'childcmp',
template: `Test Value : {{test}}`
})
class ChildCmp {
@Input() test: string;
ngOnInit() {
console.log('This if the value for user-id: ' + this.test);
}
}
@Component({
selector: 'testcmp',
template : `<childcmp [test]="'Blue32'"></childcmp>`
directives : [ChildCmp]
})
export class TestCmp {}
bootstrap(TestCmp);
See this plnkr as an example.
Update
I see that people still reach this answer, so I've updated the plnkr to beta 1 and I corrected one point on the explanation : You can access inputs in ngAfterViewInit, but you can access them earlier in the lifecycle within ngOnInit.
It's that easy as surrounding the string with double quotes, like this:
<TestCmp [test]="'Blue32'"></TestCmp>