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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Workflow di continuous deployment tramite pull request label in GitHub
Come migrare da una form non tipizzata a una form tipizzata in Angular
Miglioramenti nelle performance di Angular 16
Limitare le richieste lato server con l'interactive routing di Blazor 8
Short-circuiting della Pipeline in ASP.NET Core
Gestire i null nelle reactive form tipizzate di Angular
Effettuare il download di un file via FTP con la libreria FluentFTP di .NET
Evitare la command injection in un workflow di GitHub
Sostituire la GitHub Action di login su private registry
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Elencare le container images installate in un cluster di Kubernetes
Migrare una service connection a workload identity federation in Azure DevOps