Angular2 pass attribute to class constructor

Question

How do I pass attributes from a parent component to the class constructor of my child components in Angular 2 ?

Half the mystery is calculated, since attributes can be passed to the view without problems.

/client/app.ts

 import {Component, View, bootstrap} from 'angular2/angular2'; import {Example} from 'client/example'; @Component({ selector: 'app' }) @View({ template: `<p>Hello</p> <example [test]="someAttr" [hyphenated-test]="someHyphenatedAttr" [alias-test]="someAlias"></example> `, directives: [Example] }) class App { constructor() { this.someAttr = "attribute passsed to component"; this.someHyphenatedAttr = "hyphenated attribute passed to component"; this.someAlias = "attribute passed to component then aliased"; } } bootstrap(App); 

/client/example.ts

 import {Component, View, Attribute} from 'angular2/angular2'; @Component({ selector: 'example', properties: ['test', 'hyphenatedTest', 'alias: aliasTest'] }) @View({ template: ` <p>Test: {{test}}</p> <!-- result: attribute passsed to component --> <p>Hyphenated: {{hyphenatedTest}}</p> <!-- result: hyphenated attribute passed to component --> <p>Aliased: {{alias}}</p> <!-- result: attribute passed to component then aliased --> <button (click)="attributeCheck()">What is the value of 'this.test'?</button> <!-- result: attribute passed to component --> ` }) /******************************************************************* * HERE IS THE PROBLEM. How to access the attribute inside the class? *******************************************************************/ export class Example { constructor(@Attribute('test') test:string) { console.log(this.test); // result: undefined console.log(test); // result: null } attributeCheck() { alert(this.test); } } 

Repeat Repeat:

How do I access an attribute inside a child component of a class passed from a parent component?

Repo

Answer 1

Updated to beta .1

You can use ngOnInit for this

 @Component({ selector: 'example', inputs: ['test', 'hyphenatedTest', 'alias: aliasTest'], template: ` <p>Test: {{test}}</p> <!-- result: attribute passsed to component --> <p>Hyphenated: {{hyphenatedTest}}</p> <!-- result: hyphenated attribute passed to component --> <p>Aliased: {{alias}}</p> <!-- result: attribute passed to component then aliased --> <button (click)="attributeCheck()">What is the value of 'this.test'?</button> <!-- result: attribute passed to component --> ` }) export class Example { ngOnInit() { console.log(this.test); this.attributeCheck(); } attributeCheck() { alert(this.test); } } 

Answer 2

If you want to access property values ​​in a child component, you can:

 import {Component, View, Attribute} from 'angular2/angular2'; @Component({ selector: 'example', properties: ['test', 'hyphenatedTest', 'alias: aliasTest'] }) @View({ template: ` <p>Test: {{_test}}</p> <!-- result: attribute passsed to component --> <p>Hyphenated: {{_hyphenatedTest}}</p> <!-- result: hyphenated attribute passed to component --> <p>Aliased: {{_alias}}</p> <!-- result: attribute passed to component then aliased --> ` }) export class Example { _test: string; _hyphenatedTest: any; //change to proper type _alias: any; //change to proper type constructor() { } set test(test) { this._test = test; } set hyphenatedTest(hyphenatedTest) { this._hyphenatedTest = hyphenatedTest; } set alias(alias) { this._alias = alias; } } 

set method is launched when the property value changes. The value is passed to your local variable, in which you can work in the component.

Important things:

• The set method is always executed after the constructor.
• I don’t know why, but the parameter name in the set method must be the same as the name of this method (which means it must match the name of the property)