Molto spesso capita che a seconda delle scelte dell'utente dobbiamo mostrare o meno una sezione di una pagina. Questo è vero soprattutto quando selezioniamo una checkbox o quando selezioniamo una voce da una dropdown. Grazie al motore di binding di Angular e alle template variable possiamo svolgere questo compito in modo semplice senza dover scrivere codice TypeScript.

<input type="checkbox" name="check" #check [(ngModel)]="fake" />

<div *ngIf="check.checked">
  sezione visualizzata solo se checkbox selezionato
</div>

La template variable check rappresenta l'istanza del checkbox nel DOM e quindi colleghiamo la visibilità del tag div alla selezione della checkbox tramite la sua proprietà checked. Al fine del funzionamento, è importante che il tag input abbia la direttiva ngModel anche verso una variabile di appoggio. Questo garantisce che il motore di binding funzioni correttamente e che al cambio del valore della checkbox, il div venga mostrato o meno