You could also use the trackBy option in your *ngFor expression, providing a unique ID for every item inside the array. This does make you 100% responsible for change detection, so update this (unique) property every time the item in the array changes. Angular will then only re-render the list if any item inside your … Read more
Angular2 change detection doesn’t check the contents of arrays or object. A hacky workaround is to just create a copy of the array after mutation this.myArray.push(newItem); this.myArray = this.myArray.slice(); This way this.myArray refers a different array instance and Angular will recognize the change. Another approach is to use an IterableDiffer (for arrays) or KeyValueDiffer (for … Read more
To solve your issue, you simply need to get and store the size of the div in a component property after each resize event, and use that property in the template. This way, the value will stay constant when the 2nd round of change detection runs in dev mode. I also recommend using @HostListener rather … Read more
ChangeDetectorRef is not option to use here. It is looking for changes in a given component and its children. In your case It would be better to use ApplicationRef: import {Injectable, ApplicationRef } from ‘@angular/core’; @Injectable() export class MyService { private count: number = 0; constructor(private ref: ApplicationRef) {} increment() { this.count++; this.ref.tick(); } } … Read more
Actually, there are two ways of detecting and acting upon when an input changes in the child component in angular2+ : You can use the ngOnChanges() lifecycle method as also mentioned in older answers: @Input() categoryId: string; ngOnChanges(changes: SimpleChanges) { this.doSomething(changes.categoryId.currentValue); // You can also use categoryId.previousValue and // categoryId.firstChange for comparing old and new … Read more
Rendering happens after change detection. To force change detection, so that component property values that have changed get propagated to the DOM (and then the browser will render those changes in the view), here are some options: ApplicationRef.tick() – similar to Angular 1’s $rootScope.$digest() — i.e., check the full component tree NgZone.run(callback) – similar to … Read more
In Angular 2, change detection is automatic… $scope.$watch() and $scope.$digest() R.I.P. Unfortunately, the Change Detection section of the dev guide is not written yet (there is a placeholder near the bottom of the Architecture Overview page, in section “The Other Stuff”). Here’s my understanding of how change detection works: Zone.js “monkey patches the world” — … Read more
detectChanges() : void Checks the change detector and its children. It means, if there is a case where any thing inside your model (your class) has changed but it hasn’t reflected the view, you might need to notify Angular to detect those changes (detect local changes) and update the view. Possible scenarios might be : … Read more
Use a setter for the ViewChild: private contentPlaceholder: ElementRef; @ViewChild(‘contentPlaceholder’) set content(content: ElementRef) { if(content) { // initially setter gets called with undefined this.contentPlaceholder = content; } } The setter is called with an element reference once *ngIf becomes true. Note, for Angular 8 you have to make sure to set { static: false }, … Read more
I had a similar issue. Looking at the lifecycle hooks documentation, I changed ngAfterViewInit to ngAfterContentInit and it worked.