Saltar al contenido

vinculantes en angular usando ngModel directiveJun, 5thIn este tutorial de datos de dos vías, que van a aprender acerca de los datos angulares en ambos sentidos …

marzo 13, 2020

 En este tutorial

, vamos aprender acerca de unión utilizando la directiva ngModel los datos angulares bidireccionales.

¿Cuál es la unión de dos vías de información?

de dos vías datos de datos medios de unión fluye en ambos sentidos, los datos de vista cambia también actualiza el modelo, los datos en el modelo cambia también actualiza la vista. Directiva

ngModel

angular nos proporciona una directiva ngModel mediante el uso que podemos sincronizar los datos en ambas direcciones.

Ejemplo

Para utilizar una directiva ngModel dentro de nuestros componentes primero tenemos que importar el FormsModule en app.module.ts archivo y añadirlo a theimports matriz. de

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 { }

Let utilizan la directiva modelo ngModel.

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
myname = 'Angular';}

{{myname}}

En el código anterior, hemos añadido [(ngModel)] = “myname” significa que estamos de unión al elemento de entrada en ambas direcciones a la propiedad myname.

¿Usted ha visto en la imagen anterior, los datos de dos vías unión está funcionando correctamente.