Angular 5 - How to call a function when HTML element is created with *ngFor

Question

Currently I'm working in a view where I have to dynamically create HTML elements.

I'm creating the HTML elements with *ngFor directive bounded with an Array.

I need to refer the new HTML element with JQuery selector after push a new object into the Array, but the HTML element is not rendered yet.

How can I trigger a function just after the HTML element is ready ?

Thanks in advance.

Answer 1

You can follow below steps inside the component:-

1) On ngOnInit(), you can write logic which is responsible for generating dynamic HTML.

2) On ngAfterViewInit(), you can write the logic for the functionality which is responsible to be applied after HTML view is loaded.

The whole logic is that ngAfterViewInit() works when the HTML is fully loaded and you have to do something on that HTML. For example your view has some static HTML and some external JS files are creating some HTML elements inside some div dynamically. So first you will load your view using ngOnInit() and then using external JS you can create and bind html elements dynamically to that div.

I hope this helps you.

All the best.