Angular2, TypeScript, How to read/bind attribute value to component class (undefined in ngOnInit)

Question

can someone please advice me how to read/bind attribute value to @component class, which seems to be undefined in ngOnInit method?

Here's a plunker demo: http://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw?p=preview

I'd like to read value of "someattribute" attribute

<my-app [someattribute]="'somevalue'">

inside the App class (src/app.ts) ngOninit method.

Thanks!

Solution 1

You can notice that such parameters can't be used for root component. See this question for more details:

• Angular 2 input parameters on root directive

The workaround consists in leveraging the ElementRef class. It needs to be injected into your main component:

constructor(elm: ElementRef) {
  this.someattribute = elm.nativeElement.getAttribute('someattribute'); 
}

We need to use the component this way in the HTML file:

<my-app someattribute="somevalue"></my-app>

Solution 2

You should use @Input decorator.

This is an example:

import { Component, Input } from '@angular/core';

@Component({
    selector: 'user-menu',
    templateUrl: 'user-menu.component.html',
    styleUrls: ['user-menu.component.scss'],
})
export class UserMenuComponent {

    /**
     * userName Current username
     */
    @Input('userName') userName: string;

    constructor() {

    }
    sayMyName() {
        console.log('My name is', this.userName);
    }
}

And to use it

<user-menu userName="John Doe"></user-menu>

Solution 3

Update

Inputs aren't supported in the root component as a workaround you can use

constructor(elementRef:ElementRef) {
  console.log(elementRef.nativeElement.getAttribute('someattribute');
}

See also https://github.com/angular/angular/issues/1858

See also the fixed Plunker

original

You need to either use

[property]="value" 

or

property="{{value}}"

or if it's an attribute

[attr.property]="value" 

or

attr.property="{{value}}"