14

This example shows how to use @Input() annotation on child components. My question is how do you use it on root component? For example if you modify code on the link above:

@Component({
selector: 'app',
template: `
    <bank-account bank-name="RBC" account-id="4747"></bank-account>
`,
directives: [BankAccount]
})
class App {
    @Input() something: string;
}

bootstrap(App);

And in html:

<app something="Test"></app>

The above example never updates something property on App component.

martin
  • 93,354
  • 25
  • 191
  • 226
redman
  • 2,115
  • 5
  • 32
  • 59
  • 1
    I have been wanting to do this as well. Added a bug a while back https://github.com/angular/angular/issues/4921 – TGH Nov 11 '15 at 02:01

2 Answers2

23

I think you could still use:

class App {
    constructor(elm: ElementRef) {
        this.something = elm.nativeElement.getAttribute('something'); 
    }
}
martin
  • 93,354
  • 25
  • 191
  • 226
21

This Tobias Bosch's comment has answer on your question:

The reason why this is not working is that your index.html in which you place the <app something="Test"></app> is not an angular component. Because of this, Angular won't compile this element. And Angular does not read attribute values during runtime, only during compile time, as otherwise we would get a performance hit.

So, at this moment you can't use input parameters on root element.

alexpods
  • 47,475
  • 10
  • 100
  • 94
  • how to pass array of objects from express/jade to an angular2 component? I wanted to bind that way and it doesn't work. – Florian G Jul 11 '16 at 01:39
  • 1
    If it has the @Component decorator, how is it not an angular component? – d512 Sep 10 '16 at 18:34