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
Verificare la provenienza di un commit tramite le GitHub Actions
Limitare le richieste lato server con l'interactive routing di Blazor 8
Miglioramenti agli screen reader e al contrasto in Angular
Hosting di componenti WebAssembly in un'applicazione Blazor static
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Semplificare il deployment di siti statici con Azure Static Web App
Implementare il throttling in ASP.NET Core
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Come migrare da una form non tipizzata a una form tipizzata in Angular
Routing statico e PreRendering in una Blazor Web App
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
C# 12: Cosa c'è di nuovo e interessante