Simplificación del enlace de datos Angular a los desarrolladores de .NET

En mi trabajo, tengo la oportunidad de hablar con muchos desarrolladores de .NET que quieren aprender Angular. A menudo, he visto que aportan sus habilidades y trabajo de .NET para mapear eso en el aprendizaje de Angular. Si bien el esfuerzo y el impulso para aprender están ahí Angular no es .NET.

Dado que Angular es una biblioteca de JavaScript puro, simplificaré los conceptos básicos pero importantes de Angular para los desarrolladores de .NET en esta serie de publicaciones.

En este artículo, aprenderemos sobre los enlaces de datos en Angular. Por suerte, el enlace de datos en Angular es mucho más sencillo que en .NET.

En primer lugar, revisemos algunas de las técnicas de enlace de datos en .NET. Por ejemplo, en ASP.NET MVC, se realiza el enlace de datos mediante un modelo. La vista está enlazada

1. A un objeto
2. A un objeto complejo
3. A una colección de objetos

Básicamente, en ASP.NET MVC, se realiza el enlace de datos a una clase de modelo. Por otro lado, en WPF, tiene disponibles los modos de enlace de datos. Puede establecer el modo de enlace de datos en XAML de la siguiente manera:

1. One-way data binding
2. Two-way data binding
3. Enlace de datos de un solo uso
4. One-way to source data binding

Si sigue patrones de MVVM, es posible que use la interfaz INotifyPropertyChanged para lograr el enlace de datos bidireccional. Por lo tanto, hay muchas maneras de lograr los enlaces de datos en el mundo de .NET.

El enlace de datos en Angular, sin embargo, es mucho más sencillo.

Si eres extremadamente nuevo en Angular, entonces déjame presentarte a los componentes. En Angular aplicaciones, lo que se ve en el navegador (o en cualquier otro lugar) es un componente. Un componente consta de las siguientes partes:

1. A TypeScript class called Component class
2. Un archivo HTML llamado Template del componente
3. Un archivo CSS opcional para el estilo del componente.

En Angular, el enlace de datos determina cómo fluirán los datos entre la clase de componente y la plantilla de componente.

Angular nos proporciona tres tipos de enlaces de datos. Son los siguientes:

1. Interpolación
2. Vinculación de propiedad
3. Enlace de eventos

Veamos cada uno por uno.

Interpolación

Angular interpolación es un enlace de datos unidireccional. Se utiliza para pasar datos de la clase de componente a la plantilla. La sintaxis de la interpolación es {{propertyname}}.

Digamos que tenemos la clase de componente como se muestra a continuación:

export class AppComponent {
 
      product = {
          title: 'Cricket Bat',
          price: 500
      };
 
  }

Necesitamos pasar el producto de la clase de componente a la plantilla. Tenga en cuenta que, para simplificar el ejemplo, estoy codificando el valor del objeto del producto, sin embargo, en un escenario real, los datos podrían obtenerse de la base de datos mediante la API.  Podemos mostrar el valor del objeto del producto mediante interpolación, como se muestra en el siguiente listado:

<h1>Product</h1>
<h2>Title : {{product.title}}</h2>
<h2>Price : {{product.price}}</h2>

Mediante la interpolación, los datos se pasan de la clase de componente a la plantilla. Idealmente, cada vez que se cambia el valor del objeto del producto, la plantilla se actualizará con el valor actualizado del objeto del producto.

En Angular, hay algo llamado ChangeDetector Service, que se asegura de que el valor de la propiedad en la clase de componente y la plantilla estén sincronizados entre sí.

Por lo tanto, si desea mostrar datos en Angular, debe utilizar el enlace de datos de interpolación.

Vinculación de propiedad

Angular proporciona un segundo tipo de enlace denominado "Enlace de propiedades". La sintaxis del enlace de propiedades es el corchete []. Permite establecer la propiedad de los elementos HTML en una plantilla con la propiedad de la clase de componente. 

Entonces, digamos que tiene una clase de componente como la que se muestra a continuación:

export class AppComponent {
   btnHeight = 100;
   btnWidth = 100;
}

Ahora, puede establecer las propiedades de altura y anchura de un botón en la plantilla con las propiedades de la clase de componente mediante el enlace de propiedades.

<button 
  [style.height.px] = 'btnHeight'
  [style.width.px] = 'btnWidth' >
        Add Product
</button >

Angular enlace de propiedades se utiliza para establecer la propiedad de los elementos HTML con las propiedades de la clase de componente. También puede establecer las propiedades de otros elementos HTML como imagen, lista, tabla, etc.  Cada vez que cambie el valor de la propiedad en la clase de componente, la propiedad del elemento HTML se actualizará en el enlace de propiedad.

Enlace de eventos

Angular proporciona un tercer tipo de enlace para capturar eventos generados en la plantilla de una clase de componente. Por ejemplo, hay un botón en la plantilla de componente y, al hacer clic en el botón, desea llamar a una función en la clase de componente. Puede hacerlo mediante el enlace de eventos. La sintaxis detrás del enlace de eventos es (eventname).

Para este ejemplo, es posible que tenga una clase de componente como esta:

export class AppComponent {
     addProduct() {
         console.log('add product');
     }
 }

Desea llamar a la función addProduct con solo hacer clic en el botón de la plantilla. Puede hacerlo mediante el enlace de eventos:

<h1>Product</h1>
<button (click)='addProduct()'>
    Add Product
</button>

Puede realizar el enlace de eventos con todos los eventos de un elemento HTML que forma parte de Angular ngZone. Puedes obtener más información al respecto aquí.

Angular le proporciona estos tres enlaces. En el enlace de eventos, los datos fluyen de la plantilla a la clase y, en el enlace de propiedades y la interpolación, los datos fluyen de la clase a la plantilla.

Enlace de datos bidireccional

Angular no tiene un enlace de datos bidireccional integrado, sin embargo, al combinar el enlace de propiedades y el enlace de eventos, puede lograr el enlace de datos bidireccional.

Angular nos proporciona una directiva, ngModel, para lograr un enlace de datos bidireccional, y es muy fácil de usar. En primer lugar, importe FormsModule y, a continuación, puede crear un enlace de datos bidireccional:

export class AppComponent {
     name = 'foo';
 }

Podemos vincular datos bidireccionales a la propiedad name con un cuadro de entrada:

<input type="text" [(ngModel)]='name' />

<h2>{{name}}</h2>

Como puede ver, estamos usando [(ngModel)] para crear un enlace de datos bidireccional entre el control de entrada y la propiedad name. Cada vez que un usuario cambia el valor del cuadro de entrada, se actualizará la propiedad name y viceversa.

Como desarrollador de .NET, es posible que ahora se haya dado cuenta de que el enlace de datos en Angular es mucho más sencillo y todo lo que necesita saber son cuatro sintaxis. Espero que os sea útil este post y, en próximos posts, trataremos otros temas de Angular.

 Si te ha gustado este post, compártelo. Además, si no ha realizado Infragistics Ignite UI for AngularComponentes, ¡asegúrese de hacerlo! Tienen 30+ componentes de Angular basados en material para ayudarlo a codificar aplicaciones web más rápido.