Set reactive form after data loaded (async) - Angular 5

Question

I am trying to update the form values after loading values from an API. I tried using the *ngIf technique but the form is not visible even when the form is set.

Answer 1

i've been confronted to this issue, i don't know if my solution is the best, but it work. The technique is to use a loaded: boolean that you initiate to false and once your data fully recived in your component you set it to true

here is an exemple :

.html:

    
loading ...


   // your template goes here

and in your .ts:

loaded: boolean = false;

// your code ....

ngOnInit() {
  setTimeout(() => {
    this._dashboardService.routeChangeStarted();
  }, 0);
  this._activatedRoute.params.subscribe(params => {
    this.news["id"] = params["id"];
    this.getPartners().then(data => {
      this.getNews().then(data=>{
        this.setForm();

        // here is the important part!
        this.loaded = true
      })
    });
  });
}