En este artículo vamos a ver qué es NgModel en Angular 10 y cómo usarlo. NgModel se usa para crear una instancia de grupo de formulario de nivel superior y vincula el formulario al valor de formulario dado.
Sintaxis:
<Input [(NgModel)= 'name']>
NgModule: El módulo utilizado por NgModel es:
- Módulo de formularios
Selectores:
- [ngModel]
Acercarse:
- Cree la aplicación Angular que se utilizará
- En app.component.ts crea una variable que da valor al campo de entrada.
- En app.component.html, cree un formulario y use ngModel para obtener el valor de la entrada.
- Sirva la aplicación angular usando ng serve para ver el resultado.
Ejemplo 1:
app.component.ts
import { Component, Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformWorkerApp } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
gfg: string = '';
setValue() {
this.gfg = 'GeeksforGeeks';
}
}
app.component.html
<h1>GeeksforGeeks</h1>
<input [(ngModel)]="gfg" #ctrl="ngModel" required>
<p>Value: {{ gfg }}</p>
<button (click)="setValue()">Set value</button>
Producción:
Referencia: https://angular.io/api/forms/NgModel