CODEWITHSUNDEEP
angulartypescriptasynchronousangular-lifecycle-hooks
user3714598
user3714598

Reputation: 1783

ngOnInit hasn't finished fetching data when ngAfterViewInit was ran

I have a code that looks like this. I expect that it will finish running fetchData function before calling ngAfterViewInit but its not. Do you have an idea what to check? Thank you!

@Component({
  selector: 'my-cmp',
  templateUrl: './my-cmp.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class MyCmpComponent implements OnInit, AfterViewInit, OnDestroy {

public var1;
public var2;
..

constructor() {}

ngOnInit() {
   this.var1 = 'blaa';
   this.fetchData(x);
}

ngAfterViewInit {
  // do this
}

private fetchData(x: string) {
   // http request
   this.fetchIt(x).subscribe(response => {
     //initialize
   });
}

Upvotes: 1

Views: 26

Answers (1)

Naren Murali
Naren Murali

Reputation: 57986

Hooks do not wait for previous hooks to complete. They just trigger in a specified order, if you want some logic to execute after view is initialized, directly call it on ngAfterViewInit,

@Component({
  selector: 'my-cmp',
  templateUrl: './my-cmp.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class MyCmpComponent implements OnInit, AfterViewInit, OnDestroy {

public var1;
public var2;
..

constructor() {}

ngOnInit() {
   this.var1 = 'blaa';
}

ngAfterViewInit {
   this.fetchData(x);
}

private fetchData(x: string) {
   // http request
   this.fetchIt(x).subscribe(response => {
     // initialize logic first!
     // write your ngafterview init code here!
   });
}

Upvotes: 1

Related Questions