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
Miglioramenti nelle performance di Angular 16
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Gestire undefined e partial nelle reactive forms di Angular
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Le novità di Angular: i miglioramenti alla CLI
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Eseguire attività basate su eventi con Azure Container Jobs
Limitare le richieste lato server con l'interactive routing di Blazor 8
Evitare il flickering dei componenti nel prerender di Blazor 8