How Can do some operation once UI rendered completely in Angular8

Question

I want to perform some operation only after UI completely rendered.

Since child component is coming as undefined

child-component is from library (component from another application added as dependency). So I can't modify/enhance child-component

my.html

<div>
  <h4>Parent</h4>
  <child-component  #childComponent></child-component>
</div>

my.component.ts

@ViewChild('childComponent', {read: ChildComponent, static: false}) private child: ChildComponent;

private myFunction(): void {
  console.log('child', this.child); // This prints undefined. 
  if(this.child) {
   // DO some operations
  }
}

Answer 1

Your code is good enough, you just need to trigger myFunction() when the child is loaded, and that can be checked from Angular's ngAfterViewInit lifecycle hook:

@ViewChild('childComponent', { static: false }) child: ChildComponent;
    
ngAfterViewInit() {
    this.myFunction();
}
    
myFunction(): void {
    console.log('child', this.child); // This prints undefined.
    if (this.child) {
        // DO some operations
    }
}

Check https://stackblitz.com/edit/angular-parent-to-child-communication-avxqor I've added var into child component just to show that it's accessible this way, and added a console.log on child's OnInit to show that the child is initiated before parent's ngAfterViewInit hook.