How to bind properties between components? Angular Property Binding

Property Binding is a quick and easy way to define a property to a component of an Angular application and update this property if a change in the origin of the information is detected.

Property binding can be defined to a native HMTL element, a component or a directive. To define a property, use Template expressionsI recommend that you read this post. How to use Expressions in Angular Interpolation and Property Binding?.

One of the simplest examples is property binding src, in the section Secure contentFrom this post you can see the example in action with plunker:

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

The label imgalso has an attribute src, but here it is worth pointing out that the properties and attributes of an element are not the same. Property Binding applies to the properties themselves, not the attributes.

Attributes are sometimes used to reflect the state of an element or component, but an attribute is useful for declaring initial element information in HTML code, a property is part of the element instance.

To prove that they are different, if you want to obtain the value of an attribute, use element.getAttribute(attributeName), to obtain the value of a property we use element.property.

To define an attribute, use element.setAttribute(attributeName, value), to define a property we use element.property = value.

Attributes are stored in a property element.attributesof the element or component instance. To understand this about attributes and properties, I recommend the section synchronization of attributes and properties.

Now let's see how we can enable and disable a <input>through property disabled:

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

There is another notation to link properties, bind-property="expression":

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

Another interesting example is defining the value classof an element through the directive ngClass:

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

Here the question is, How does angular know that ngClassIs it a directive and not a property?

In another publication we will see how to create a directive, for the moment just take into account that the way in which directives are created allows Angular to check whether it is a directive or not. Angular before trying to do a property binding checks if a property exists ngClassin the directive or in the element that is being applied. In the above case, the native elements do not have the property ngClass, html elements have the property classNameand classList, but in this case we can say that [ngClass]It is a directive.

Secure content

Angular does its job in keeping your code secure, here is an example using property binding:

caution: string = '  ';

Communication between components

The binding of properties is very useful in the communication from Parent to child of components, let's see a concrete example, we have the parent component pb-person-list, which contains a list of child components of type pb-person.

• Parent component:
  • src/app/pb-person-list/pb-person-list.component.ts
  • src/app/pb-person-list/pb-person-list.component.html
• Child component:
  • src/app/pb-person-list/pb-person.component.ts
  • src/app/pb-person-list/pb-person.component.html

The parent component contains an array of people, this array is bound through the directive *ngForand Property Bindingwith the property personof the child component.

Here is something very important, so that the child component can perform the Property Linking, the property is defined personwith the decorator @Input('alias'), to himself the property personinside the component it is used as person, but from the outside it is bound with [person]="expression"', this is because of the alias that we defined in @Input('person) person: Object. The alias is optional, if it does not have it, then it is bound with [person]="expression"