¿Cómo enlazar propiedades entre componentes? Property Binding Angular

El enlazado de propiedades o Property Binding en ingles, es una forma fácil y rápida en que se puede definir una propiedad a un componente de una aplicación en angular y actualizar esta propiedad si se detecta un cambio en el origen de la información.

El enlazado de propiedades se puede definir a un elemento nativo HMTL, un componente o una directiva.Para definir una propiedad se utilizan Expresiones de plantillas, te recomiendo que leás esta publicación ¿Cómo usar Expresiones en Interpolación y Property Binding de Angular?.

Uno de los ejemplos más sencillos es el enlazado de la propiedad src, en la sección Contenido segurode esta publicación podrás ver el ejemplo en acción con plunker:

<img [src]="persona.photoURL">

La etiqueta imgtambién tiene un atributo src, pero aquí vale la pena indicar que las propiedades y atributos de un elemento no son lo mismo. El Enlazado de Propiedades se aplica a las propiedades mismas, no a los atributos.

Los atributos a veces se ocupan para reflejar el estado de un elemento o componente, pero un atributo es útil para declarar información inicial del elemento en el código HTML, una propiedad forma parte de la instancia del elemento.

Para probar que son diferentes, si quieres obtener el valor de un atributo se utiliza elemento.getAttribute(nombreAtributo), para obtener el valor de una propiedad se utiliza elemento.propiedad.

Para definir un atributo se utiliza elemento.setAttribute(nombreAtributo, valor), para definir una propiedad se utiliza elemento.propiedad = valor.

Los atributos se guardan en una propiedad elemento.attributesde la instancia del elemento o componente. Para entender esto de atributos y propieades te recomiendo la sección sincronización de atributos y propiedades.

Ahora veamos como podemos habilitar y deshabilitar un <input>a través de la propiedad disabled:

<input [disabled]="isDisabled" value="Hola"/>

Existe otra notacion para enlazar propiedades, bind-propiedad="expresion":

<input bind-disabled="isDisabled" value="Hola"/>

Otro ejemplo interesante es definir el valor classde un elemento a traves de la directiva ngClass:

<p [ngClass]="clases"></p>

Aqui la pregunta es, ¿Cómo sabe angular que ngClasses una directiva y no una propiedad?

En otra publicación veremos como crear una directiva, por el momento solo toma en cuenta que la forma en que las directivas estan creadas permite a angular revisar si es una directiva o no. Angular antes de intentar hacer un property binding revisa si existe una propiedad ngClassen la directiva o en el elemento que se esta aplicando. En el caso anterior, los elementos nativos no tiene la propiedad ngClass, los elementos html tiene la propiedad classNamey classList, pero en este caso podemos decir que [ngClass]es un directiva.

Contenido seguro

Angular hace su trabajo en mantener tu codigo seguro, aquí un ejemplo usando property binding:

cuidado: string = '<script>alert('Este código es peligroso')</script>';

Comunicación entre componentes

El enlazado de propiedades es muy útil en la comunicación de Padre a hijo de componentes, veamos un ejemplo concreto, tenemos al componente padre pb-person-list, el cual contiene un listado de componentes hijos de tipo pb-persona.

• Componente padre:
  • src/app/pb-person-list/pb-person-list.component.ts
  • src/app/pb-person-list/pb-person-list.component.html
• Componente hijo:
  • src/app/pb-person-list/pb-person.component.ts
  • src/app/pb-person-list/pb-person.component.html

El componente padre contiene un arreglo de personas, este arreglo se bindea a través de la directiva *ngFory _Property Binding_con la propiedad persondel componente hijo.

Aquí hay algo de suma importancia, para que en el componente hijo se pueda realizar el Enlazado de Propiedades, se define la propiedad personcon el decorador @Input('alias'), a si mismo la propiead persondentro del componente es utilizada como persona, pero desde el exterior se bindea con [person]="expresion"', esto es así debido a el alias que definimos en @Input('person) persona: Object. El alias es opcional, si no lo tiene, entonces se bindea con [persona]="expresion"