Utilizzare una checkbox per mostrare o meno un tag HTML con Angular

di Stefano Mostarda, in HTML5, Angular,

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

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi