In the code below I have 2 calls, getDetail and Save. Save uses an object 'this.detail$' which is created in the subscribe of the 1st call, getDetail.

The trouble is this.detail$ is never assigned to before Save gets called. I've tried to put the Save logic in a function within the subscribe after this.detail$ is assigned to bit I get the same result. What's the best way to handle this?

SetPublishedFlag(flag: boolean, _id:string){
    this.id = _id;
    this.getDetail();
    this.Save(flag);
  }

  getDetail(): void {
    this.data.getEventDetail(this.id).subscribe(data => this.detail$ = data as DetailModel);
  }

  Save(flag: boolean) {
    this.detail$.Published = flag;
    this.edit.editEvents(this.detail$, this.id);
  }
}

In the code below I have 2 calls, getDetail and Save. Save uses an object 'this.detail$' which is created in the subscribe of the 1st call, getDetail.

The trouble is this.detail$ is never assigned to before Save gets called. I've tried to put the Save logic in a function within the subscribe after this.detail$ is assigned to bit I get the same result. What's the best way to handle this?

SetPublishedFlag(flag: boolean, _id:string){
    this.id = _id;
    this.getDetail();
    this.Save(flag);
  }

  getDetail(): void {
    this.data.getEventDetail(this.id).subscribe(data => this.detail$ = data as DetailModel);
  }

  Save(flag: boolean) {
    this.detail$.Published = flag;
    this.edit.editEvents(this.detail$, this.id);
  }
}

• javascript
• angular
• typescript

• Why can't you call Save in subscribe rather than in SetPublishedFlag? – Ali Shahbaz Commented Oct 1, 2018 at 9:54

3 Answers 3

Try something like:

async SetPublishedFlag(flag: boolean, _id:string){
    this.id = _id;
    this.detail$ = await this.getDetail();
    this.Save(flag);
  }

  getDetail(): Promise<DetailModel> {
    return this.data.getEventDetail(this.id).toPromise();
  }

  Save(flag: boolean) {
    this.detail$.Published = flag;
    this.edit.editEvents(this.detail$, this.id);
  }
}

Perhaps not the best solution, but a solution:

SetPublishedFlag(flag: boolean, _id: string){
    this.id = _id;
    this.getDetail(flag);
  }

  getDetail(flag): void {
    this.data.getEventDetail(this.id).subscribe((data) => {
      this.detail$ = data as DetailModel;
      this.Save(flag);
    });
  }

  Save(flag: boolean) {
    this.detail$.Published = flag;
    this.edit.editEvents(this.detail$, this.id);
  }

You can map the data back to your caller function and then subscribe over there to call Save().

or alternatively you can call the method Save() from getDetail() also.

SetPublishedFlag(flag: boolean, _id:string){
    this.id = _id;
    this.getDetail().subscribe(() => { 
             this.Save(flag); // call save after observable has been returned
     });
  }

  getDetail(): void {
    return this.data.getEventDetail(this.id).pipe(map(data => this.detail$ = data as DetailModel));
  }

  Save(flag: boolean) {
    this.detail$.Published = flag;
    this.edit.editEvents(this.detail$, this.id);
  }
}