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
89
votes
7 answers

Angular 6 View is not updated after changing a variable within subscribe

Why is the view not being updated when a variable changes within a subscribe? I have this code: example.component.ts testVariable: string; ngOnInit() { this.testVariable = 'foo'; this.someService.someObservable.subscribe( () =>…
25
votes
3 answers

Change default change detection strategy

How to set the default change detection strategy to OnPush? Can it be set globally somehow? I want to avoid having to adding this line to every component @Component({ ... changeDetection: ChangeDetectionStrategy.OnPush, ... })
mookie the swede
  • 427
  • 6
  • 13
22
votes
2 answers

Should I always use ChangeDetectionStrategy.OnPush

Should I always use ChangeDetectionStrategy.OnPush in my components? I always hear how OnPush is absolutely amazing, and solves so many issues, speeds up the Angular app, and even get rid of NgZone. But if it is, why isn't it generated by default…
Dolan
  • 1,519
  • 4
  • 16
  • 36
18
votes
5 answers

Change detection does not trigger when the formgroup values change

I have created a simple example to demonstrate a weird issue I'm facing. Stackblitz - https://stackblitz.com/edit/angular-change-detection-form-group I have three components and here are they: 1 - app component import { Component, OnInit,…
Ansuman
  • 1,404
  • 4
  • 14
  • 32
12
votes
1 answer

Angular change detection loop triggered by using getters inside template

It seems using getters inside templates causes Angular change detection to go into a loop (getter gets called hundreds of times). After reading up a ton on similar issues out there I cannot seem to get a clear answer. Background info: I do believe…
10
votes
1 answer

Render time-based Observables in Angular without overwhelming change detection

We have a number of components in our Angular application that need to regularly display new values every second that are unique to each component (countdowns, timestamps, elapsed time, etc). The most natural way to is to create observables that use…
Craig Smitham
  • 3,395
  • 4
  • 31
  • 38
10
votes
1 answer

Angular 5 realtime Change Detection in Directive

I'm pretty much informed of how Angular's Change Detection works, as well as how we can use OnChanges hook for detecting @Input properties changes, and also a subscribing to ngModel valueChanges in for example a Directive or a Component etc.. Can…
NavCore
  • 1,115
  • 3
  • 10
  • 25
9
votes
1 answer

How Angular Change Detection is triggered when you are binding to a function?

From these two posts: The mechanics of DOM updates in Angular Angular 2 Performance: Is it better to bind with a data member than a function? I understand how the DOM updated when the 'Change Detection' has occurred. The thing I do not understand…
nikrooz
  • 121
  • 1
  • 5
8
votes
3 answers

How do I dynamically create components with third party library in Angular?

Using Angular 10 There are many questions on SO that are similar to this, but I have yet to find one that answers my situation. I'm hoping someone can guide me. I'm using a third party library to display 360° photos. This third party library has a…
calbear47
  • 1,060
  • 2
  • 18
  • 38
8
votes
2 answers

Showing Validation messages with Reactive Forms and ChangeDetectionStrategy.OnPush

I'm trying to migrate an app to using ChangeDetectionStrategy.OnPush. However, I'm running into a bit of a blocker trying to work with some reactive forms. I've got a reusable control that shows validation messages based on some of the state flags…
7
votes
4 answers

Angular 9: how to re-render component

I have one parent and one child component. If the child component updates its value internally I am unable to update value back from Parent. See the example in this Stackblitz: https://stackblitz.com/edit/angular-ivy-tynepp. When the child component…
Andrei V
  • 1,468
  • 3
  • 17
  • 32
7
votes
1 answer

Angular markForCheck vs detectChanges

I'll start this question from notion that I've seen a similar question on StackOverflow, but that question had only answer for the difference. What I'm asking is what should I use depending on situation and what drawbacks one or another method may…
Sergey
  • 7,184
  • 13
  • 42
  • 85
6
votes
2 answers

Angular. Why calling markForCheck() results to view update

Everywhere it is said that markForCheck just marks current component view and all parent components (up to the root one) as dirty. So next time DetectChanges executes it will update the view. From this point I have 2 questions. Both in a context…
simply good
  • 991
  • 1
  • 12
  • 26
6
votes
1 answer

Change component input from ngOnChanges, while using OnPush strategy

I'm having a problem with an Angular 6 application: The problem Let's say I have 2 components: parent and child. the child has 2 inputs. While 1 input changes, inside the ngOnChanges() the child component emit somthing to the parent component. Then…
6
votes
0 answers

Unit Testing using Jasmine returning TypeError: this.changeDetectorReference.markForCheck is not a function

I'm writing a test for an Angular pipe. The pipe has an injected ChangeDetectorRef and this.changeDetectorRef.markForCheck() is been called in a function. However, when I write and run my Unit test, it fails with the error TypeError:…
1
2 3
23 24