angular - How to bind a Promise to a component property? -

i have promise object needs parsed component, how achieve when promise in component-one resolved, promise object parsed component-two can resolved?

componentone excerpt

@component({    selector: 'component-one',    template: `        <h1>title</h1>        <component-two [promiseddata]="promiseddata"></component-two>      `,    directives: [componenttwo]    })  export class componentone {    promiseddata: promise<any>;        constructor () {      this.promiseddata = new promised(resolve => {               settimeout(function(){                   resolve('test');                }, 1000);      });    }  }

componenttwo excerpt

@component({    selector: 'component-two',    template: `        <h2>          {{processeddata}}           // {{processeddata}} undefined becaused           // resolved promise doesn't parse component-two.        </h2>      `,    inputs: ['promiseddata']    })  export class componenttwo {    promiseddata: promise<any>;    processeddata: string;        constructor () {      promiseddata.then(data => this.processeddata = data);      }  }

the easy way add async pipe template this:

{{promiseddata | async}}

edit: here's working example showing async pipe: plunker

edit2: plunker showing oninit: plunker