Angular 2 - Is there an event, when UI binding is finished

Question

If I change the value of a bounded object in my component, angular automatically updates the value on the UI. This update-process takes some milliseconds (depend on the device). Is there an event when the UI-update-process finished?

At the moment I use following code:

// refresh binding
boundedItem = newValue;

// wait 100 milliseconds and the open the browsers print view 
setTimeout(() => {
    // open browser print view
}, 100);

On slow devices (smartphones) the process could be take more than 100 milliseconds, so the code is not really clean.

score 7 · Accepted Answer · answered Mar 30 '17 at 07:57

7

Just invoke change detection explicitely, then you know the view is updated before further code is executed:

constructor(private cdRef:ChangeDetectorRef)  {}

someMethod() {
  boundedItem = newValue;
  this.cdRef.detectChanges();
  // view update is completed here
}

answered Mar 30 '17 at 07:57

Günter Zöchbauer

623,577
216
2,003
1,567

Glad to hear :) – Günter Zöchbauer Mar 31 '17 at 10:56
this works for data only but how can i do this for data and images that are loaded – cpiock Apr 16 '18 at 11:56
1

@cpiock https://stackoverflow.com/questions/39257687/detect-when-image-has-loaded-in-img-tag/39257902#39257902 – Günter Zöchbauer Apr 16 '18 at 12:05
1

used this to have my function wait until a new array loaded into a controller variable before scrolling down to a given position in the list. works great. – PptSbzzgt Apr 10 '20 at 07:25

score 0 · Answer 2 · answered Mar 30 '17 at 08:00

0

You can try this Life-cycle hook:

ngAfterViewInit(){

}

answered Mar 30 '17 at 08:00

Rohit Rane

2,790
6
25
41

Angular 2 - Is there an event, when UI binding is finished

2 Answers2