Angular 4, trying to understand change detection

0
votes

I'm trying to understand how change detection and ChangeDetectionStrategy.OnPush actually work, here is an example of something weird I cannot understand:

plnkr

I create a father component with the following template:

<app-matrix-reader *ngFor="let m of fooService.getMatrices()" [matrix]="m"></app-matrix-reader>

The child component app-matrix-reader has an input text.

<input type="text" [(ngModel)]="matrix.a" /><br/>

If I simply click through the inputs multiple times (even without change its value) the function getMatrices is called.

Why the function getMatrices() is called? I also put changeDetectionStrategy.OnPush so the components should be checked and updated only if their input are updated...

Thank you

1
angularangular2-changedetection
Angular is just checking if something has changed after going in and out an input, and to check that it needs to take the original values an compare with the current ones – Pablo Lozano

1 Answers

2
votes

Look at this answer

Angular will run change detection cycle whenЖ

...

2) a bound event (like (click) or some host listener) is triggered from the component (that is your case)

If I simply click through the inputs multiple times (even without change its value) the function getMatrices is called.

You're firing blur event on input so angular will mark tree to your component to be checked and execute change detection