Event triggered once the html binding is complete in Angular 2/4/5

Question

I have a parent component which has 2 child components like this

The data for the child components is coming in parent component from service and passed to the child components using input properties. As the data is very large and we have lot of custom components like ( Dropdowns and Tables). It takes time to bind the data to html elements as we have 47 droddowns in one child. I want to know an event which is fired when the html binding is complete ie the data in ts is binded to html and html is rendered properly?

Any help would be highly appreciated.

I have tried all the lifecycle hooks provided by angular but they are getting called before the html binding and rendering is completed.

Answer 1

https://angular.io/guide/lifecycle-hooks

"ngAfterViewInit() {}" is your choice. The HTML is rendered and the changeDetection with digest cycle has completed. Dont forget to implement "AfterViewInit" interface in your component.

Answer 2

your custom directives will solve this problem. see the link

https://www.c-sharpcorner.com/article/sort-of-directives-in-angular-6-and-how-to-use-them/