In this article, I will send to everyone an extremely useful feature in Angular that we use very often, that is properties binding . So what is it?
P / s: The article is referenced from the source .
Understanding data binding types in Angular is an important step in building an Angular application. When building, you will often meet the duo specializing in displaying data in the view: Properties binding and Interpolation – supporting transferring data from component to view .
Data binding is an important and powerful technique in application development. It supports interaction between component and its own view. Help our application become more flexible.
Well, long theory is enough. The main part is always, in Angular there are 4 main types of data binding:
- Event binding
- Two-way data binding
- Interpolation
- Property binding
The first is Event binding : this form will trigger the event from view to component . The view will send data from an event, for example when we click the button to update the value in the component. This is the opposite of property binding – from component to view .
See the details in the following example:
|
1 2 3 4 5 |
// component.html <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token punctuation">></span></span> My name is {{name}} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">(click)</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> updateName() <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Update button <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span class="token comment">// component.ts</span> @ <span class="token function">Component</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> templateUrl <span class="token punctuation">:</span> <span class="token string">'component.html'</span> <span class="token punctuation">,</span> selector <span class="token punctuation">:</span> <span class="token string">'app-component'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> name <span class="token operator">=</span> <span class="token string">'Peter'</span> <span class="token punctuation">;</span> <span class="token function">updateName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> <span class="token string">'John'</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Next, we will learn about Two-way data binding : with this type of binding, the data flow will go 2-way from component to view and vice versa. Components and views will be synchronized immediately when there is a change from 1 in 2 sides. This format is often used in the form to update the value as the user enters it.
Interpolation
This form will be covered in this section. In this technique, the variable represented in the component is placed between the curly brace of the view. Angular will find the variable that matches the text in our view and replace this text with the value that is assigned to the variable . Numeric and string distortions are placed between {{}} pairs.
|
1 2 3 4 |
//component.html <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token punctuation">></span></span> {{ name }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> |
|
1 2 3 4 5 6 7 8 9 10 |
<span class="token comment">// component.ts</span> @ <span class="token function">Component</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> templateUrl <span class="token punctuation">:</span> <span class="token string">'component.html'</span> <span class="token punctuation">,</span> selector <span class="token punctuation">:</span> <span class="token string">'app-component'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> name <span class="token operator">=</span> <span class="token string">'Peter'</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Property binding This binding mechanism helps you set properties for elements in the view. Update the value of an attribute in the view and bind it to an element. Syntax: [] . The following is an example of setting the disabled property via property binding for a button:
|
1 2 3 4 |
// component.html <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">[disabled]</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> buttonDisabled <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> |
|
1 2 3 4 5 6 7 8 9 10 |
<span class="token comment">// component.ts</span> @ <span class="token function">Component</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> templateUrl <span class="token punctuation">:</span> <span class="token string">'component.html'</span> <span class="token punctuation">,</span> selector <span class="token punctuation">:</span> <span class="token string">'app-component'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> buttonDisabled <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
The following article, we will learn more details about String Interpolation as well as examples of Property binding or more here .