title: angular 2 async observable @Input
body: <p>angular 2 async observable @Input</p>
  
  <p>In my component i have an property input that i want to feel when observable return value.</p>
  
  <pre><code>getAppointments(askForAnswerId: number): Observable&lt;Appointment[]&gt; {
  return this.appointmentService.GetByAskForAnswerId(askForAnswerId);
  }
  
  &lt;app-appointment [appointments]="
  (getAppointments(askForAnswer.askForAnswerId) | async)"&gt;&lt;/app-appointment&gt;
  </code></pre>
  
  <p>is it possible to do something like that ?</p>
  
  <p>DashboardService</p>
  
  <pre><code>import { Injectable, OnInit } from '@angular/core';
  import { AskForAnswerService } from "app/services/ask-for-answer.service";
  import { Observable } from "rxjs/Observable";
  import { AuthenticationService } from "app/services/auth/auth.service";
  import { ApplicationUser } from "app/model/account/application-user";
  import { AskForAnswer } from "app/model/ask-for-answer";
  import { AppointmentService } from "app/services/appointment.service";
  import { Appointment } from "app/model/appointment";
  
  @Injectable()
  export class DashboardService {
  
    constructor(
      private userService: AuthenticationService,
      private askForAnswerService: AskForAnswerService,
      private appointmentService: AppointmentService
    ) { }
  
    getUser(): Observable&lt;ApplicationUser&gt; {
      return this.userService.getUser();
    }
  
    getActiveAskForAnswer(email: string): Observable&lt;AskForAnswer[]&gt; {
      return this.askForAnswerService.GetActiveByEmail(email);
    }
  
    getAppointments(askForAnswerId: number): Observable&lt;Appointment[]&gt; {
      return this.appointmentService.GetByAskForAnswerId(askForAnswerId);
    }
  
  
  }
  </code></pre>
  
  <p>DashboardComponent</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { USER_NAV } from "app/model/forms/nav-item";
  import { DashboardService } from "app/modules/user/dashboard/dashboard.service";
  import { Observable } from "rxjs/Observable";
  import { ApplicationUser } from "app/model/account/application-user";
  import { AskForAnswer } from "app/model/ask-for-answer";
  import { MdSnackBar } from "@angular/material";
  import { DashboardServiceProvider } from "app/modules/user/dashboard/dashboard.service.providers";
  import { Appointment } from "app/model/appointment";
  
  @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.scss'],
    providers: [DashboardServiceProvider]
  })
  export class DashboardComponent implements OnInit {
  
    links = USER_NAV;
    user$: Observable&lt;ApplicationUser&gt;;
    askForAnswersActive$: Observable&lt;AskForAnswer[]&gt;;
    count: number = 0;
  
    constructor(
      private dashboardService: DashboardService,
      public snackBar: MdSnackBar) {
      this.user$ = this.dashboardService.getUser();
      this.user$.subscribe(
        res =&gt; this.userSubscribers(res),
        errors =&gt; console.error(JSON.stringify(errors))
      );
  
    }
  
    ngOnInit() {
  
  
    }
  
    private userSubscribers(user: ApplicationUser): void {
      if (user) {
        this.askForAnswersActive$ = this.dashboardService.getActiveAskForAnswer(user.email);
        this.snackBar.open("Bienvenu " + user.familyName + " " + user.givenName, null, { duration: 3000 });
      }
    }
  
    private getAppointments(askForAnswerId: number): Observable&lt;Appointment[]&gt; {
      return this.dashboardService.getAppointments(askForAnswerId);
    }
  
  
  
  
  
  }
  </code></pre>
  
  <p>Dashboard template</p>
  
  <pre><code>&lt;div *ngFor="let askForAnswer of askForAnswersActive$ | async"&gt;
  
      &lt;app-appointment [appointments]="(getAppointments(askForAnswer.askForAnswerId) | async)"&gt;&lt;/app-appointment&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>AppointementTemplate</p>
  
  <pre><code>&lt;div *ngFor="let appointment of appointments"&gt;
    &lt;span&gt;{{appointment | json}}&lt;/span&gt;
  
  &lt;/div&gt;
  </code></pre>