{"id":3555,"date":"2018-01-12T19:59:21","date_gmt":"2018-01-12T19:59:21","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2018\/01\/12\/enlazado-propiedades-property-binding-angular\/"},"modified":"2024-03-08T09:51:22","modified_gmt":"2024-03-08T15:51:22","slug":"enlazado-propiedades-property-binding-angular","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/enlazado-propiedades-property-binding-angular\/","title":{"rendered":"How to bind properties between components? Angular Property Binding"},"content":{"rendered":"

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.<\/p>\n

Property binding can be defined to a native HMTL element, a component or a directive. To define a property, use Template expressions<\/em>I recommend that you read this post. How to use Expressions in Angular Interpolation and Property Binding?<\/a>.<\/p>\n

One of the simplest examples is property binding src<\/code>, in the section Secure content<\/strong>From this post you can see the example in action with plunker:<\/p>\n

<img [src]="persona.photoURL">\n<\/code><\/pre>\n
The label img<\/code>also has an attribute src<\/code>, 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.<\/p>\n
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.<\/p>\n
To prove that they are different, if you want to obtain the value of an attribute, use element.getAttribute(attributeName)<\/code>, to obtain the value of a property we use element.property<\/code>.<\/p>\n
To define an attribute, use element.setAttribute(attributeName, value)<\/code>, to define a property we use element.property = value<\/code>.<\/p>\n
Attributes are stored in a property element.attributes<\/code>of the element or component instance. To understand this about attributes and properties, I recommend the section synchronization of attributes and properties<\/strong><\/a>.<\/p>\n
Now let's see how we can enable and disable a <input><\/code>through property disabled<\/code>:<\/p>\n
<input [disabled]=\"isDisabled\" value=\"Hola\"\/>\n<\/code><\/pre>\n
There is another notation to link properties, bind-property="expression"<\/code>:<\/p>\n
<input bind-disabled=\"isDisabled\" value=\"Hola\"\/>\n<\/code><\/pre>\n
Another interesting example is defining the value class<\/code>of an element through the directive ngClass<\/code>:<\/p>\n
<p [ngclass]="clases"><\/p>\n<\/code><\/pre>\n
Here the question is, How does angular know that ngClass<\/code>Is it a directive and not a property?<\/strong><\/p>\n
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 ngClass<\/code>in the directive or in the element that is being applied. In the above case, the native elements do not have the property ngClass<\/code>, html elements have the property className<\/code>and classList<\/code>, but in this case we can say that [ngClass]<\/code>It is a directive.<\/p>\n
Secure content<\/h2>\n
Angular does its job in keeping your code secure, here is an example using property binding:<\/p>\n
caution: string = '  ';\n<\/code><\/pre>\n