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.

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.

• javascript
• angular

• what exactly are you trying to achieve with this? – Max Koretskyi Commented Oct 25, 2017 at 5:06
• 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. – kplates Commented Oct 29, 2017 at 22:14

3 Answers 3

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.

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

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();
  }
}