Angular 4 and settimeout

Question

In angular, some of the functions I want to execute once changes are updated on the DOM by 2 way binding.

AS event is not clear lot of settimeout functions are used and these functions are causing lot of CPU utilization .

Please do let us know the event that fires after the chnage in DOM completed by angular.

You can use ngAfterViewInit OR ngAfterViewChecked depends on your requirement — Sandip - Frontend Developer, Jan 19 '18 at 07:01
Possible duplicate of [What is the Angular equivalent to an AngularJS $watch?](https://stackoverflow.com/questions/34569094/what-is-the-angular-equivalent-to-an-angularjs-watch) — John, Jan 21 '18 at 09:49

score 0 · Answer 1 · answered Jan 19 '18 at 07:35

0

There are many such Angular generated events called Angular life-cycle hooks.

You can read this article https://angular.io/guide/lifecycle-hooks

So basically you can use any of these:

ngAfterContentInit()

ngAfterContentChecked()

There are others as well. The article will help you figure out which one to use.

answered Jan 19 '18 at 07:35

Vinod Bhavnani

2,185
1
16
19

HI, I am aware of these events , but this need to be tracked when a service subscription causes chnages in the model and model is bind with UI and the changes on UI is reflected(need to be 100% sure the chnages are reflected to the UI) and then I want to handle the event ( currently we are using settimeout for it) – Shaj Jan 20 '18 at 06:36

score 0 · Answer 2 · answered Jan 19 '18 at 07:36

0

As @Sandip Patel mentioned in the comments. You can use the ngAfterViewInit() method. Here is an example of a component.

import {AfterViewInit, Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit, AfterViewInit {

  constructor() { }

  ngOnInit() {
  }
  ngAfterViewInit(){
  // DOM is loaded. do your logic or DOM-manipulation here.
  }


}

answered Jan 19 '18 at 07:36

John

10,165
5
55
71

HI , I am aware of these event , Here Init is called very first time when the component is initialized, where as I want to track the event when the component is updated (model) is updated dut to an service subscribed for and event and I want to handle UI after the modelchnages reflected on the UI completely. – Shaj Jan 20 '18 at 06:34
Maybe you are looking for something like this: https://stackoverflow.com/a/34570122/1471485 – John Jan 21 '18 at 09:50
Thanks John, This link is really good, but my question is still unanswered. In the given flow of the link, what event (hook/deligate) is triggered after "For any binding changes that are found, the Components are updated, and then the DOM is updated. Change detection is now finished. The browser notices the DOM changes and updates the screen." – Shaj Jan 30 '18 at 11:35

Angular 4 and settimeout

2 Answers2