Angular 2/4 - strange behavior of reference variable with checkbox

Question

This code doesn't work!

<input type="checkbox" value="1" #c>
<div *ngIf="c.checked">Show if checkbox is checked</div>

But this works! Why??!

<input type="checkbox" value="1" (change)="true" #c>
<div *ngIf="c.checked">Show if checkbox is checked</div>

Answer 1

Angular updates the bindings (and therefore the screen) only if the app does something in response to asynchronous events, such as keystrokes, click, change, xmlhttprequest, setTimeout, Promise.then and so on (see also what is the use of Zone.js in Angular 2)

While the statement (change)="true" does nothing useful in your second example, it satisfies Angular's requirement so that Angular will update the screen. For more detail refer reference variable in angular template.