Optimize and debug change detection like a pro | Max Koretskyi | AngularConnect 2018
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about ExpressionChangedAfterItHasBeenChecked and other change detection behavior in Angular.
Recommended by 1 people across 1 different months, 2019 to 2019.
What it is
A conference talk by Max Koretskyi at AngularConnect 2018 explaining how Angular's change detection works under the hood, using short examples. It covers OnPush optimization, debugging errors like ExpressionChangedAfterItHasBeenChecked, and how the mechanism changes in Ivy.
What people said
Recommends Shashank Vivek · 2019-06 · Stack Overflow · on “Expression has changed after it was checked. Previous value: 'null: 1561881140820'. Current value: 'null: 1561881140880'”
This is happening because you are assigning currentMillis to angular expression using {{currentMillis}} , so this function get currentMillis() is triggered on every change detection cycle. Try putting console.log in that function and see ( Make sure you are never assigning a function to {{ }} because it would be called unnecessarily and impact the performance ). So, every time Change detection runs, it gets different value because the time is changed every millisecond. Refer ChangeDetection video [this video] to handle this exact problem and why it happening
Cites alindber · 2019-07 · Stack Overflow · on “Angular ng-boostrap modal with an embeded video reloads when mouse is moved”
Well - It turns out that the lifecycle hooks were seeing the mouse movement and thus validating the DOM against any changed it found. To solve this problem I moved the the url sanitizer into 'ngOnInit` and saved it as a private variable. Then returned the variable when requested by the template. I also removed the directive from the template that I created in my attempt to stop event propagation. So now the class looks like: import { Component, OnInit, Input } from '@angular/core'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'mt2-help', templateUrl: './myHelp.component.html', st
Cites Ron Rofe · 2019-10 · Stack Overflow · on “Navigating to specific place in the document with Angular”
First I want to point that I have tried to solve my issue with NGRX but I know it was the wrong solution and it yielded some other issues with the usage of Angular. I have one page web app built in Angular separated to number of sections instead of separated pages. The app also has a navigation bar which contain buttons to navigate to selected section in the same page (instead of "route" to other page). The point is that each section has no fixed height, since it depends on it's inside content => Height = dynamic number . In order to provide the offset which scrollTo function needs to receive, I need to make a cross component communication between my navbar.component.ts to unlimited number o