3

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.

Harry
  • 3,031
  • 7
  • 42
  • 67
Andrés ddg
  • 39
  • 1
  • 3
  • 4
    Can you add the code you are using for this... – Michael Doye Jun 28 '18 at 09:20
  • 1
    You should not handle the DOM yourself (with JQuery) when you use Angular. Could you tell us what you want to achieve, and we will tell you how to do that in Angular ? –  Jun 28 '18 at 09:21

2 Answers2

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>
  `
})
export class AppComponent implements AfterViewChecked {

  constructor(private elementRef: ElementRef) {}

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

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

}
fjc
  • 5,590
  • 17
  • 36
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.

Abhishek Sharma
  • 360
  • 1
  • 10