I need some jQuery code to run after my Angular component view has initialized to transform number values into stars.
I put the code in the ngAfterViewInit function, but it is not doing what I need it to. I set a break point in the function and I see that most of the HTML of my component has not even loaded by the time ngAfterViewInit function is called. The parts that have not loaded are generated using *ngFor directive.
How can I get my code to run after this directive has generated all of the html on which I need to operate?
ngOnInit() is called right after the directive's data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated. ngAfterViewInit() is called after a component's view, and its children's views, are created.
ngAfterViewInit() is called once after ngAfterContentChecked(). ngAfterViewInit() is called after all child components are initialized and checked. ngAfterViewInit() is called after the view is initially rendered. This is why @ViewChild() depends on it.
ngAfterViewInit is useful when you want to call a lifecycle hook after all child components have been initialized and checked.
ngAfterViewChecked() It is called after the ngAfterViewInit hook and every subsequent ngAfterContentChecked hook.
I have been using ngAfterViewChecked when I depend on the DOM being ready.
import {Component, AfterViewChecked} from '@angular/core'; export class Spreadsheet implements AfterViewChecked{ ngAfterViewChecked(){ } }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With