En esta sección, usaremos ngModel con etiquetas HTML en aplicaciones angulares.
La etiqueta podría ser cualquier etiqueta HTML5, como o . El NgModel no soporta etiquetas como , .
Vamos a ensuciarnos las manos y a sumergirnos en el código.
app.component.html
12345678910<form> Username:<inputtype="text "placeholder="Enter Username "name="username"[(NgModel)]="username"/><labelfor="username"{{{{username}}</label></form>html
Aquí he usado una etiqueta de entrada, pero puedes elegir cualquier etiqueta de tu elección. Debes tener el atributo del nombre en la etiqueta y la directiva crucial NgModel. Esto te ayuda a sincronizar los datos con el archivo de la clase de componente. Estoy mostrando el nombre de usuario en la siguiente línea de la etiqueta de entrada, como se refleja a continuación.
componente.de.la.aplicación
1234567891011121314import{Componente,DoCheck,OnInit}de"@angular/núcleo";@Componente({ selector: "app-root", templateUrl:"./app.component. html", styleUrls:["./app.component.scss"]})exportclassAppComponentimplementsOnInit{ username:string;ngOnInit(){this.username="John";}}ts
En el archivo de la clase componente, acabo de establecer el valor del nombre de usuario de la variable, que es el mismo que el de la formaControlName. Debe ser el mismo; de lo contrario, no va a funcionar.
app.module.ts
123456789101112importar{Módulo de Navegador}de"@angular/plataforma-navegador";importar{NgMódulo}de"@angular/núcleo";importar{Módulo de Formas}de"@angular/formas";importar{Componente de Aplicación}de". /app.component";@NgModule({ declaraciones:[AppComponent], importa:[BrowserModule,FormsModule], proveedores:[], bootstrap:[AppComponent]})exportclassAppModule{}ts
Para trabajar con el ngModule necesitas importar el FormModule. Si trabajas con un formulario basado en una plantilla, necesitas importar el FormModule en el app.module.ts.
Ahora vamos a echar un vistazo a la salida.
Al establecer el valor de la variable nombre de usuario en el app.component.ts, nuestra salida debería ser así:
Nombre de usuario
Hola John
Dependiendo del valor del cuadro de texto, la etiqueta de abajo cambiaría para coincidir con él.