In Angular, how to determine Parent component fully render time if it has child components which depend on async http calls to display data on UI?

Question

I have an Angular Parent component with 3 Child components. The Child components can only be fully rendered after we get response from an async API call and am trying to find time taken to completely render (display data on UI) these 3 child components. Below is how I have written my code.

For example:

import { Component, OnInit, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-child1></app-child1>
    <app-child2></app-child2>
    <app-child3></app-child3>
  `,
})
export class ParentComponent implements OnInit, AfterViewInit {
  startTime : number = (new Date()).getTime();
  constructor() {}

  ngOnInit() {}

  ngAfterViewInit() {
    const endTime : number = (new Date()).getTime();
    console.log('module load time: '+ (endTime - this.startTime)); --> 1. Not giving the correct time taken to render the UI.
 }
}

This method ngAfterViewInit() is being triggered even before the child components are fully rendered. I think it is because child components are depending on an async http response to get rendered and ngAfterViewInit() in parent component doesn't care about this and ran even before the http response comes back

I read about Performance Navigation Timing Api, ngZone online. Can I use them here? If yes, how? What is the best way to do this?

score 0 · Answer 1 · answered Apr 27 '23 at 03:15

I think its a misunderstanding.

ngAfterViewInit of the parent component will always run after the child. So when your method ngAfterViewInit() of the parent is running, the child was already fully rendered. Get an async http response and re-render is another step, which we understand as a change detection. To catch this one, we use ngAfterViewChecked() and need to determine what was changed.

The easy way I think is creating a eventEmitter to let the parent know when the async http response from children was done

In Angular, how to determine Parent component fully render time if it has child components which depend on async http calls to display data on UI?

1 Answers1