Diferencia entre enlace unidireccional y enlace bidireccional

En este artículo, aprenderemos el concepto de enlace de datos en Angular. También exploraremos sus tipos y examinaremos las diferencias entre el enlace unidireccional y el enlace bidireccional en angular. 

El enlace de datos es una forma de sincronizar automáticamente. A diferencia de React, angular admite enlaces bidireccionales. De esta manera, podemos hacer que el código se acople más libremente. El enlace de datos se puede clasificar en 2 tipos, es decir, enlace unidireccional y enlace bidireccional.

Enlace unidireccional:

• En el enlace unidireccional, el flujo de datos es unidireccional.
• Esto significa que el flujo de código es del archivo TypeScript al archivo Html.
• Para lograr un enlace unidireccional, usamos el concepto de enlace de propiedad en Angular.
• En el enlace de propiedades, encapsulamos la variable en Html con corchetes ( [ ] ).
• Entenderemos este concepto a través de un ejemplo para hacerlo más comprensible.

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "Displaying the content with one way binding";
}

<h3>Displaying the content without one way binding</h3>
  
<hr />
  
<h3 [textContent]="title"></h3>

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

Producción:

Enlace bidireccional:

• En un enlace bidireccional, el flujo de datos es bidireccional.
• Esto significa que el flujo de código es del archivo ts al archivo Html, así como del archivo Html al archivo ts.
• Para lograr un enlace bidireccional, usaremos ngModel o banana en una sintaxis de cuadro.
• Para asegurarnos de que la aplicación no se rompa, debemos importar ‘FormsModule’ desde ‘@angular/forms.
• Cualquier cambio en la vista se propaga a la clase de componente. Además, cualquier cambio en las propiedades de la clase de componente se refleja en la vista.
• Para enlazar dos propiedades con el fin de que funcione el enlace bidireccional, declare la directiva ngModel y configúrela igual al nombre de la propiedad.
• Entenderemos el concepto a través de un ejemplo para hacerlo más comprensible.

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  data = "Ram and Syam";
}

<input [(ngModel)]="data"  type="text">
  
<hr>
  
<h3> Entered data is  {{data}}</h3>

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

Producción:

Diferencia entre encuadernación unidireccional y bidireccional