Angular 4, trying to understand change detection

Question

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

Answer 1

Look at this answer

• Change Detection issue -- Why is this changing when it's the same object reference with On Push

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