How to handle async operation in angular?

Question

I am trying to initiate a modal component on ngOnInit() by passing fragments in route link

  ngOnInit() {
    this.getCandidateDetails()

    this.route.fragment.subscribe(qp => {
      if ('openjobeditmodal' == qp) {
        this.editJobRole();
      }
    })
    
  }

now I am able to open a modal component on page initiation but the issue is that component takes this.getCandidateDetails() response as Input,and this.getCandidateDetails() is getting called after modal initiate,how can I ensure thatI only subscribe to modal only after this.getCandidateDetails() gets called

Answer 1

Make this.getCandidateDetails() return a Promise, then await the Promise completion before subscribing the observable:

async ngOnInit() {
  await this.getCandidateDetails()

  this.route.fragment.subscribe(qp => {
    if ('openjobeditmodal' == qp) {
      this.editJobRole();
    }
  })
}

Share the code of your getCandidateDetails() if you want help at making it return a promise.