NgModel - Angular 5

NGMODEL

Es una directiva de Angular usada en formularios. Muy importante , si queremos trabajar con "ngModel" tendremos que llamar la libreria FormsModule de '@angular/forms'.

app.module.ts

1234567891011121314151617

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule} from '@angular/forms';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    FormsModule,  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

app.component.ts

12345678910

import { Component } from '@angular/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  nombre:string;}

app.component.html

12

<input  type="text" [(ngModel)]="nombre" placeholder="nombre"><p>Mi nombre es: {{nombre}}</p>

Todo lo que escribimos en nuestra etiqueta input, se asignará a nuestra variable nombre y se mostrará en nuestra etiqueta <p>.

Tambien podemos usar ngModel para acceder  a parametros de un array.

app.component.html

1234567

<input  type="text" [(ngModel)]="Datos.nombre" placeholder="nombre"><input  type="text" [(ngModel)]="Datos.edad" placeholder="edad"><input  type="text" [(ngModel)]="Datos.pais" placeholder="pais"><p>Nombre: {{Datos.nombre}}</p><p>Edad:   {{Datos.edad}}</p><p>Pais:   {{Datos.pais}}</p>

app.component.ts

12345678910111213

import { Component } from '@angular/core'@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  Datos =[    {nombre:'',edad:'',pais:''}  ];}