Execute function after DOM has finished rendering

Question

I recall reading the excerpt below from a blog.

$timeout adds a new event to the browser event queue (the rendering engine is already in this queue) so it will complete the execution before the new timeout event.

I'm wondering if there is a better way in angular/ javascript than using

setTimeout(() => { 
 // do something after dom finishes rendering
}, 0);

to execute code when the DOM has completely finished a task such as updating an *ngFor and rendering the results on the page.

• Max Koretskyi: what exactly are you trying to achieve with this?
• kplates: Launch the print window. Since i'm lazy loading content usually I end up seeing the loading spinner since the DOM hasn't finished rendering the content.

Answer 1

You might try the ngAfterViewInit life-cycle hook, which is the chronologically last single-fire life-cycle hook.

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

It works much like ngInit but it fires after the view and child views have initialized.

If you need something that fires every time the DOM finishes you can try ngAfterViewChecked or ngAfterContentChecked.

• kplates: I believe this only fires after page init, not after each time a DOM event completes
• Niles Tanner: @kplates I believe your right, in that case you might try some of the other life-cycle hooks such as ngAfterViewChecked which can fire multiple times. (i've updated the answer to reflect this)

Answer 2

problem: I need to run a function sometimes after some parts loaded. (I wanted to stretch out an input and a label)

ngAfterViewInit and route change detection didn't solve my problem

Solution: I made a component which

import { Component, AfterViewInit } from '@angular/core';
declare var jquery: any;
declare var $: any;
@Component({
selector: 'app-inline-label',
templateUrl: './inline-label.component.html',
styleUrls: ['./inline-label.component.scss']
})
/** InlineLabel component*/
/**
this component stretch inline labels and its input size
*/
export class InlineLabelComponent implements AfterViewInit {
/** InlineLabel ctor */
constructor() {
}
ngAfterViewInit(): void {
var lblWidth = $('.label-inline').width();
var parentWidth = $('.label-inline').parent().width();
var fieldWidth = parentWidth - lblWidth;
$('.form-control-inline').css("width", fieldWidth);
}
}

then I used it anywhere in my html like

<app-inline-label></app-inline-label>

even if my html had *ngIf="", I used app-inline-label inside that tag and solved all my problems

Actually it will be fired exactly when <app-inline-label> </app-inline-label> being rendered

Answer 3

If the function to be rendered multiple times ngAfterContentChecked will be preferable.

app.component.ts

 export class AppComponent implements OnInit, OnDestroy {
 
 searchRegister: any = [];
 
 constructor() {
 }
 
 ngAfterContentChecked(): void {
 this.setHTMLElements();
 }
 setHTMLElements() {
 this.searchRegister = ['cards-descriptor__subtitle','insights-card__title','article-headline__title','wysiwyg__content','footer-logo__heading','hero-breadcrumbs__blurb','multi-column-text__body','small-two-column-image-text__blurb','two-column-image-text__blurb','image-blurbs-expandable__desc',];
 for (var val of this.searchRegister) {
 var classLength = this.dom.body.getElementsByClassName(val).length;
 for (var i = 0; i <= classLength; i++) {
 if (
 this.dom.body.getElementsByClassName(val)[i]?.innerHTML != undefined
 ) {
 this.dom.body.getElementsByClassName(val)[
 i
 ].innerHTML = this.dom.body
 .getElementsByClassName(val)
 [i]?.innerHTML?.replace(/[®]/gi, '<sup>®</sup>');
 }
 }
 }
 }
 }

Other.component.ts

import { AppComponent } from '../../app.component';
export class IndustryComponent implements OnInit {
 constructor(private appComponent: AppComponent) { }
 ngAfterContentChecked(): void {
 this.appComponent.setHTMLElements();
 }
}