Enlace de datos de una sola vez en Angular 2+

1. el componente a la vista
2. Pasos para usar el enlace de datos de una sola vez en Angular 2+

En Angular 2+, el enlace de datos único solo actualiza la vista cuando hay un cambio en el modelo o cualquier propiedad de entrada. Este tipo de enlace de datos reduce las actualizaciones innecesarias de la vista, lo que genera un mejor rendimiento y menos trabajo para su computadora.

La naturaleza unidireccional del enlace de datos unidireccional es evidente. Solo puede vincular datos de un componente o vista a otro.

el componente a la vista

Varias estrategias de vinculación de datos emplean vinculación de datos unidireccional para conectar datos de un componente a una vista.

Enlace de propiedad

Esta técnica le permite vincular la propiedad de un elemento HTML a una propiedad de objeto en el modelo. Implica cambiar el valor de propiedad de un componente y envolver ese valor en un elemento HTML en la misma vista.

Para alternar la funcionalidad y el intercambio de datos entre miembros, usamos Property Binding.

Enlace de atributos

Con esta técnica, podemos vincular el atributo de un elemento HTML a una propiedad de objeto en el modelo y especificar qué valor de atributo se actualiza cuando ocurre un cambio.

Enlace de clase

Esta técnica vincula los elementos DOM a las clases de AngularJS y permite actualizarlos con datos del modelo.

Enlace de interpolación

El método de interpolación permite al usuario adjuntar un valor a un elemento de la interfaz de usuario. La interpolación vincula los datos en un proceso unidireccional, por lo que los datos fluyen de los componentes a los elementos HTML de una sola manera.

Pasos para usar el enlace de datos de una sola vez en Angular 2+

Esta sección le mostrará cómo usar el enlace de datos unidireccional en Angular 2+.

Ejemplo (TypeScript):

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    demo = 'Write something here'
}

Ejemplo (HTML):

<h1>Example of Angular One way Data Binding</h1>
<textarea id="hello" name="demo" class="form-control" (change)="demo = $event.target.value"></textarea>
{{demo}}

Haga clic aquí para ver la demostración en vivo del código como se mencionó anteriormente.