Angular 5 - How To Call A Function When Html Element Is Created With *ngfor

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 n

Solution 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.

Solution 2:

As pointed out in the comments, you probably don't want to use JQuery on Angular DOM elements if you have a choice. It will lead to endless confusion.

You can, however, access a component's DOM children using elementRef.nativeElement. The lifecycle hook where you want to run that in the case of *ngFor (or other structural directives) is AfterViewChecked. At that point, you know that the component has finished binding and rendering its content.

Combined, here's a cheap little example just coloring all dynamically generated divs of a component:

import {AfterViewChecked, Component, ElementRef} from'@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let entry of entries">
      {{entry}}
    </div>
  `
})
exportclassAppComponentimplementsAfterViewChecked {

  constructor(private elementRef: ElementRef) {}

  entries = ['a', 'b', 'c'];

  ngAfterViewChecked(): void {
    const divs = this.elementRef.nativeElement.querySelectorAll('div');
    divs.forEach(div => div.style.background = 'red');
  }

}