¿Qué tipos de enlaces existen en Angular?
sobes.tech AI
Respuesta de la IA
En Angular, existen varios tipos de enlaces que permiten sincronizar datos entre el componente y la plantilla:
-
Enlace de propiedades (Property Binding): Permite enlazar la propiedad HTML de un elemento con una propiedad del componente. Los cambios en el valor de la propiedad del componente actualizan el valor de la propiedad HTML. Se usa con corchetes
[].<img [src]="imageUrl" alt="Imagen"> -
Interpolación (Interpolation): Permite mostrar el valor de una propiedad del componente en la plantilla como una cadena. Usa doble llave
{{}}.<p>{{ greeting }}</p> -
Enlace de eventos (Event Binding): Permite responder a eventos del DOM (por ejemplo, clics, entrada de texto) y llamar a métodos del componente. Se usa con paréntesis
().<button (click)="onClick()">Haz clic</button> -
Enlace bidireccional (Two-Way Binding): Combina el enlace de propiedades y el enlace de eventos, permitiendo sincronizar el valor entre un elemento de formulario y una propiedad del componente en ambas direcciones. Usa la sintaxis
[(ngModel)]. Requiere importarFormsModule.<input [(ngModel)]="userName" type="text"> -
Enlace de atributos (Attribute Binding): Se usa para enlazar atributos HTML que no son propiedades del DOM (por ejemplo,
colspan,aria-*). Usa el prefijoattr..<td [attr.colspan]="colspanCount"></td> -
Enlace de clases (Class Binding): Permite agregar o quitar dinámicamente clases CSS en función del valor de una propiedad del componente.
<div [class.active]="isActive"></div> -
Enlace de estilos (Style Binding): Permite establecer estilos CSS en función del valor de una propiedad del componente.
<div [style.backgroundColor]="bgColor"></div>