Angular2 pass attribute to class constructor

Question

How do I pass attributes from a parent component to their child components' class constructor in Angular 2?

Half of the mystery is figured out, as attributes can be passed to the view without problem.

/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);
  }
}

To re-iterate:

How can I access an attribute inside the child component's class passed in from the parent component?

Repo

Eric Martinez · Accepted Answer · 2016-01-17 22:29:08Z

11

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);
  }
}

edited Jan 17, 2016 at 22:29

answered Aug 5, 2015 at 13:41

Eric Martinez

31.9k9 gold badges95 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

haz111 · Accepted Answer · 2015-08-05 10:16:10Z

0

If you want to have access to properties values in 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 run when the value of property changes. Value is passed to your local variable on which you can operate in component.

Important things:

set method is always executed after constructor
I don't know why but the name of parameter in set method must be same as name of this method (so it means it must be the same as name of property)

answered Aug 5, 2015 at 10:16

haz111

7641 gold badge6 silver badges17 bronze badges

4 Comments

shmck Over a year ago

This is very helpful to know. Thank you! However, as the set method is run after the constructor, I still don't have access to this.test when the class is loaded. There must be a solution.

shmck Over a year ago

I've edited the solution above to show that the @Attribute way also sets this.test, however also after the constructor has loaded.

haz111 Over a year ago

I was searching solution of this problem last week but nothing worked. I hope that it exists. set method is poor replacement - unfortunately it doesn't solve all problems.

shmck Over a year ago

Now that I think of it, I could potentially move my constructor code into the set block. It would actually work, but there must be a better way.

Collectives™ on Stack Overflow

Angular2 pass attribute to class constructor

/client/app.ts

/client/example.ts

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

/client/app.ts

/client/example.ts

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related