javascript - How to pass input to component from a promise in Angular 2 -

i have angular component rank-entry takes input variable server , uses variable in template. component used rank-table component list of rank entries representing different servers, list of servers comes rank-tables getservers() method gets promise server service. works expected.

now i'm trying make more specific component, server-detail. accessed route /detail/:id , component creates table 1 row should rank-entry 1 server. expecting able use getserver(id) method server service, give server-detail promised server , server can given rank-entry component in html i'm getting error:

error: uncaught (in promise): error: error in ./rankentrycomponent class rankentrycomponent - inline template:4:4 caused by: undefined not object (evaluating 'self.context.server.online')

i think might because when rank-entry component created server-detail component promise hasn't been resolved yet , rank-entry doesn't have server object?

any great thanks!

server-detail.component.ts

import {component, oninit, input } '@angular/core'; import { activatedroute, params } '@angular/router'; import { location } '@angular/common';  import { server } './utilities/server'; import { serverservice } './server.service';  @component({   selector: 'app-server-detail',   templateurl: 'server-detail.component.html' }) export class serverdetailcomponent implements oninit {    constructor(     private route: activatedroute,     private serverservice: serverservice   ){}    @input()   server: server;    ngoninit(): void {     this.route.params.foreach((params: params) => {       let id = +params['id'];       this.serverservice.getserver(id).then(server => {this.server = server});     })   }  } 

rank-entry.component.ts

import { component, input } '@angular/core'; import { server } './utilities/server';  @component({   selector: 'tr[app-rank-entry]',   templateurl: './rank-entry.component.html' }) export class rankentrycomponent {    @input()   server: server;  } 

rank-entry.component.html

<th scope="row">{{server.rank}}</th> <td>{{server.name}}</td> <td><img [src]="this.server.img"/></td> <td>{{server.currplayers}}/{{server.maxplayers}}</td> <td *ngif="server.online">online</td><td *ngif="!server.online">offline</td> 

server.service.ts

import { injectable } '@angular/core';  import { server } './utilities/server'; import { servers } './utilities/mock-servers';  @injectable() export class serverservice {   getservers(): promise<server[]> {     return promise.resolve(servers);   }    getserver(id: number): promise<server> {     return this.getservers().then(servers =>       servers.find(server => server.id === id));   }  } 

and server-detail.component.html creates rank-entry component so: <tr app-rank-entry [server]="server"></tr>

i'm new angular 2 don't know more heroes tutorial @ moment, though through googling i've seen things such elvis operator ? , async pipe neither of these work!

in angular2 observable similar promise has subscribe method instead of method

an observable stream

unlike promise's method, observable's subscribe method can called multiple times, every time observable emits. otherwise, promises , observables pretty identical.

to pass observable stream child component parent component use async pipe.

here example ...

the parent component https://github.com/danday74/angular2-chartjs2/tree/master/app/components/stream-graph-parent

the child component subscribes stream via async pipe note because using async pipe don't call subscribe inside child, done automatically angular. https://github.com/danday74/angular2-chartjs2/tree/master/app/components/stream-graph