El data binding de Angular es un tema importante cuando se trata de pasar datos entre componentes al DOM. En este artículo voy a hablar de la vinculación de datos unidireccional y bidireccional.
Este es un método de vinculación de datos unidireccional. Si utilizamos la vinculación de datos unidireccional sólo podemos vincular datos del componente a la vista o de la vista al componente. Hay muchas formas diferentes en las que podemos utilizar el data binding unidireccional en nuestra aplicación Angular.
- Interpolation Binding
La interpolación es un método muy común que utilizamos para vincular datos en Angular y se refiere a la vinculación de valores en elementos de la UI.
Como se muestra en el ejemplo podemos utilizar la variable vinculada en elementos HTML añadiendo llaves como {{Name}}. Este método se utiliza sobre todo cuando necesitamos concatenar dos valores, por ejemplo: {{FirstName}} {{Last Name}}. {{Last Name}}.
2. Property Binding.
Este es otro enfoque ampliamente utilizado para enlazar datos y con este método, podemos enlazar valores de los componentes en las propiedades DOM de los elementos HTML.
Si utilizamos el botón de interpolación en estas situaciones se desactivará siempre descuidando el valor de la variable.
3. Attribute Binding
La vinculación de atributos se utiliza para vincular una propiedad de atributos de un elemento de la vista. Tomemos un escenario que necesitamos para fusionar algunas columnas en una tabla utilizando un atributo colspan.
Si utilizamos variable de valor como se muestra en el comentario o como una propiedad bind resultará en un error. Así que necesitamos usar un Attribute binding con inicio con attr y seguido por un punto y el nombre del atributo.
4. Class Binding
La sintaxis del class binding es muy similar al Attribute Binding y este método se usa para establecer una propiedad de clase de un elemento de la vista. Con el uso de este método de vinculación, podemos añadir clases CSS condicionalmente a un elemento, creando elementos con estilo dinámico.
La propiedad CSS roja sólo se aplicará cuando las notas de los estudiantes sean inferiores a 40. Al igual que la vinculación de atributos, la vinculación de clases comienza con la palabra clave class seguida de un punto y el nombre de la clase.
5. Style Binding
Este método también es muy similar a los dos anteriores y podemos establecer Style Binding para establecer estilos css en línea.
Enlace de datos bidireccional
El enlace de datos bidireccional consiste en establecer una conexión bidireccional entre la Vista y el componente permitiendo a los usuarios intercambiar datos en ambos sentidos. La vinculación de datos bidireccional se puede lograr fácilmente mediante el uso de (ngModel).
Por favor, asegúrese de importar FormsModule de @angular/forms al archivo app.component.ts si está utilizando (ngModel).