Per funzionare deve essere importatala propietà ngModel tramite import { FormsModule } from '@angular/forms'; e scrivendo FormsModule in @Component nel campo imports[]
La sintassi [(ngModel)]="nome_variabile" fa si che al verificarsi dell'evento cambi il valore della variabile associata.
Valore del checkbox: false
Codice nel file html:
<input type="checkbox" [(ngModel)]="selezionato" />
Valore del checkbox: {{ selezionato }}
Opzione 1 Opzione 2
Hai scelto:
Codice nel file html:
<input type="radio" [(ngModel)]="opzione" [value]=" 'Opzione 1' ">Opzione 1
<input type="radio" [(ngModel)]="opzione" [value]=" 'Opzione 2' ">Opzione 2
<br> Hai scelto: {{opzione}}
Hai scelto:
Codice nel file html:
<select [(ngModel)]="menu">
<option [ngValue]=" 'verde' ">verde</option>
<option [ngValue]=" 'bianco' ">bianco</option>
<option [ngValue]=" 'rosso' ">rosso</option>
</select>
<br> Hai scelto: {{menu}}
Hai scritto:
Codice nel file html:
<textarea [(ngModel)]="testo" placeholder="Scrivi qui"></textarea>
<br> Hai scritto: {{testo}}
N.B. Le variabili usate da ngModeldevono essere dichiarate nel file ts:
selezionato: boolean = false; -/- opzione: string = '';
-/- menu:string = ''; -/- testo:string = '';