Questions tagged [angular-changedetection]

Used for questions regarding Angular's change detection routines.

As opposed to AngularJS's digest cycles, Angular uses change detection which occurs in zones (see NgZone). Questions regarding this process, how it differs from AngularJS's digest cycle, how microtasks work, etc., are all applicable to this tag.

353 questions
6
votes
1 answer

Angular7 - [ngModel] does not update in component, when typing in the same value twice

Minimal Stackblitz Example https://stackblitz.com/edit/angular-mqqvz1 In an Angular 7 App, I have created a simple component with an field. When I change the input-value with the keyboard, I want the value to be formated onBlur. - In the…
6
votes
2 answers

Automatically update display of relative time with Moment.js

Given a list of items (think of it as a chat with multiple messages), I'd like to use moment.js to display the relative time (e.g. since creation) for each item. Each item has its own component and relative time is displayed using the following…
tilo
  • 14,009
  • 6
  • 68
  • 85
6
votes
2 answers

Angular - Impure pipe vs function

I am implementing a filtering operation on an array in Angular2. A pure pipe is not triggering when an element change in the array. Thus, I have to use either an impure pipe or make the filtering with a function inside of the component like…
6
votes
1 answer

Angular change detection strategy on push without immutable objects

I've been reading some articles about change detection strategy, but i have some doubts about which are the cases where makes sense to use on push strategy. Basically my doubt is about when we have nested components with binding of objects which are…
5
votes
2 answers

Why does Angular async pipe uses cdr.markForCheck() and not cdr.detectChanges()?

I have a general Angular question: Why does Angular async pipe use cdr.markForCheck() instead of cdr.detectChanges()? What I see there are two main differences in these two 'styles': markForCheck() marks the path to be checked up to the root…
Felix
  • 3,999
  • 3
  • 42
  • 66
5
votes
1 answer

My breakpoint in Angular's change detection is not triggered on checkAndUpdateView()

Following this good article on angular's change detection, I wanted to debug the checkAndUpdateView function. However, it is never triggered. What am I missing? I tried with the latest Chrome and Firefox.
Tim
  • 3,910
  • 8
  • 45
  • 80
5
votes
2 answers

Angular click event handler not triggering change detection

To put my problem simply, I have an element in component's template. This element has an ngIf condition and a (click) handler. It is not rendered from the very beginning, because the ngIf condition evaluates to false. Now comes the interesting part:…
Dan Macak
  • 16,109
  • 3
  • 26
  • 43
5
votes
1 answer

Ag-grid defaultColDef not re-applied after initial component load

Ag-grid applies defaultColDef formatting (cellStyle and cellRenderer) perfectly using ngOnChanges when the table initially receives async-retrieved data. However, if the component containing the grid is hidden and then re-initialized via an *ngIf…
classact
  • 51
  • 4
5
votes
2 answers

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked - How to update template after Observable Value change

I went through quite a lot of SO posts trying to find a solution to this one, the only one I found had a hack implementation. I have an observable taken from the ngrx store which I subscribe too: this.navigationSelected$ =…
qubits
  • 1,227
  • 3
  • 20
  • 50
5
votes
1 answer

why is ngDoCheck() being called when i have called detach() from ChangeDetectorRef?

I was going through some articles on change detection and i was trying to enable or disable change detection using the changeDetectorRef.detach() and changeDetectorRef.reattach() . I also hooked the component to the ngDoCheck() only to find…
CruelEngine
  • 2,701
  • 4
  • 23
  • 44
5
votes
1 answer

Change detection in store.select subscribe requires markForCheck. Why?

My app component is having a subscribe on a store select. I set ChangeDetectionStrategy to OnPush. I have been reading about how this works; object reference needs to be updated to trigger a change. When you use async pipe however, Angular expects…
Mattijs
  • 3,265
  • 3
  • 38
  • 35
5
votes
1 answer

Angular Reactive Forms AddControl Causes ExpressionChangedAfterItHasBeenCheckedError When Using PatchValue

I wanted to be able to build up a reactive form using components, but not set it all up in a single parent component. So I created the intial FormGroup and passed it to the components, which then do this.form.addControl(this.fb.group({ ... })); to…
mtpultz
  • 17,267
  • 22
  • 122
  • 201
5
votes
2 answers

Angular: detect changes inside expensive synchronous function

I have a function which executes an expensive synchronous task. In my case it's a client-side pdf generation through pdfkit, but let's just emulate it with a while-loop sleep. I'd like to display a "loading" spinner before running the task, and hide…
4
votes
4 answers

mark entire app dirty and force changedetection

Lets imagine an app where all Components (including app.component) are onPush. how can I call a function forceAppWideChangeDetection() in for eg app.component that will ensure run changeDetection in EACH AND EVERY component of the app. I imagine I…
Andre Elrico
  • 10,956
  • 6
  • 50
  • 69
4
votes
1 answer

Angular - Dynamic Component Rendering Wrong Data

Solved As mentioned below by Aaron, the "Other Option" approach works without issues and feels a lot cleaner. I'll leave the updates and everything in case anyone in the future has a similar problem and the workarounds provide useful somehow. I'm…
1
2
3
23 24