javascript - Angular 2: how to pass attributes to child component? -

in application have home root component , generic component named list i'm rendering inside home.

i want pass data property list component coming xmlhttprequest.

home.ts

import {component} 'angular2/core'; import {dashboardservice} '../../services/dashboard'; import {list} '../contact/list';  @component({   selector: 'home',   template:       `      <h3>home</h3>      <list type="{{type}}"></list>      `   providers: [dashboardservice],   directives: [list], }) export class home {    private _type: any;    constructor(private _dashboardservice: dashboardservice) {     this._dashboardservice.typetodisplay()       .subscribe((type) => {           this._type = type;       });   } } 

list.ts

@component({   selector: 'list',   properties: ['type'],   template: `         <h2>list</h3>   `,   providers: [dashboardservice] }) export class list {    private type: any;    constructor(@attribute('type') type:string) {     this.type = type;     console.log(type);   } } 

i'm getting string data typetodisplay() method http request & assigning type variable. when passed property list component i'm getting null in list constructor.

i tried i'm getting "type" string same way.

hope question clear.

this syntax

<list type="{{type}}"></list> 

is setting property not attribute.
set attribute use either

<list attr.type="{{type}}"></list> 

or

<list [attr.type]="type"></list> 

if want have value available in list use

@input() type: any; 

instead of attribute injection.
way value not availabe yet inside constructor, in ngoninit() or later.