CODEWITHSUNDEEP
angularasynchronousinputobservable
Yoamb
Yoamb

Reputation: 485

angular 2 async observable @Input

angular 2 async observable @Input

In my component i have an property input that i want to feel when observable return value.

getAppointments(askForAnswerId: number): Observable<Appointment[]> {
return this.appointmentService.GetByAskForAnswerId(askForAnswerId);
}

<app-appointment [appointments]="
(getAppointments(askForAnswer.askForAnswerId) | async)"></app-appointment>

is it possible to do something like that ?

DashboardService

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<ApplicationUser> {
    return this.userService.getUser();
  }

  getActiveAskForAnswer(email: string): Observable<AskForAnswer[]> {
    return this.askForAnswerService.GetActiveByEmail(email);
  }

  getAppointments(askForAnswerId: number): Observable<Appointment[]> {
    return this.appointmentService.GetByAskForAnswerId(askForAnswerId);
  }


}

DashboardComponent

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<ApplicationUser>;
  askForAnswersActive$: Observable<AskForAnswer[]>;
  count: number = 0;

  constructor(
    private dashboardService: DashboardService,
    public snackBar: MdSnackBar) {
    this.user$ = this.dashboardService.getUser();
    this.user$.subscribe(
      res => this.userSubscribers(res),
      errors => 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<Appointment[]> {
    return this.dashboardService.getAppointments(askForAnswerId);
  }





}

Dashboard template

<div *ngFor="let askForAnswer of askForAnswersActive$ | async">

    <app-appointment [appointments]="(getAppointments(askForAnswer.askForAnswerId) | async)"></app-appointment>


</div>

AppointementTemplate

<div *ngFor="let appointment of appointments">
  <span>{{appointment | json}}</span>

</div>

Upvotes: 0

Views: 1421

Answers (2)

RemyaJ
RemyaJ

Reputation: 5526

Try 

this.appointments = this.appointmentService.GetByAskForAnswer();

and in template 

[appointments]="appointments"

Upvotes: 1

Yoamb
Yoamb

Reputation: 485

@RemyaJ is rigth, the problem come from detectchange processing of angular , to avoid that i do this and it works fine :) :).

don't call function in template with async this result infinite loop

Upvotes: 1

Related Questions