¿Qué tipos de enlace de datos existen en Angular?

En Angular, existen los siguientes tipos de enlace de datos:

1. Enlace de datos unidireccional desde la fuente hasta la vista (One-Way Data Binding: Componente a DOM): Los cambios en el componente se reflejan en la vista (HTML).

   • Enlace por interpolación (Interpolation): Mostrar los valores de las propiedades del componente.

     <p>{{ propiedadComponente }}</p>
     

   • Enlace de propiedades (Property Binding): Establecer los valores de las propiedades de los elementos DOM.

     <img [src]="urlImagen">
     

2. Enlace unidireccional desde la vista hasta la fuente (One-Way Data Binding: DOM a Componente): Los cambios en la vista (eventos del usuario) afectan las propiedades del componente.

   • Enlace de eventos (Event Binding): Manejar eventos de elementos DOM.

     <button (click)="manejarClic()">Haz clic en mí</button>
     

3. Enlace bidireccional (Two-Way Data Binding): Los cambios en el componente y en la vista afectan uno al otro simultáneamente.

   • Utiliza la sintaxis [()].

     <input [(ngModel)]="nombreUsuario">
     

   • Requiere importar FormsModule para ngModel.