In this tutorial we’ll discuss property binding, one of the most important concept of Angular.

Property binding allows to set value of property of HTML elements and directives. In property binding, movement of data is from component’s property to target element property.

Property binding syntax

To understand the property binding syntax, let us first see an example of property binding.

<img [src]="imageUrl">

We use square brackets [ ] to enclose the element’s property to be bound. The property enclosed in square brackets [ ] is the target property. In the above example, src is the target property. The right hand side of the assignment with square brackets is treated as a dynamic expression evaluated by the Angular.

To summarize, src is the element’s property or the target property. This is bound to a property imageUrl in the component.

Let us see another example.

<my-component [myProperty]="myPropertyValue"></my-component>

In this example, my-component is our custom component and myProperty is the target property of my-component. myProperty is bound to myPropertyValue.

Note: If we don’t use square brackets, the right hand side of the assignment is treated as string literal and will not be evaluated dynamically.

Examples of usage of property binding

1. Using property binding to set a directive property

Property binding can be used to set a directive property. A common use case is applying style class to an element based on a condition or expression. ngClass directive is used to apply conditional classes.

<p [ngClass]="myCustomClass">[ngClass] binding example</p>

In this example, myCustomClass is a property in component.

myCustomClass = 'btn-small';

This will apply btn-small class to element. btn-small is your custom class which can be defined in .css file.

2. Bind values between components using property binding

Suppose there are two components, parent and child. child is used inside parent component (parent-component.component.html).

<!-- parent-component.component.html file -->
<child-component [childProperty]="parentCompProperty"></child-component>

If we want to bind child component property to parent component, following changes are required:

1. Create a property childProperty in child component (child-component.ts file) and annotate with @Input decorator. @Input decorator will declare this property as an input property and expects if to be flown from parent component.
2. Create a property parentCompProperty in parent component (parent-component.component.ts).
3. Enclose the target property childProperty in square brackets ([ ]), as shown in above piece of code.

3. Using property binding to disable/enable button

This is a very common use case of property binding. Button has a DOM property disabled which we can bind to a boolean value. When the boolean value is true, button will be disabled else it is enabled.

<button [disabled]="booleanValue">Button</button> 

Here, booleanValue is a boolean value which can hold value as true or false.

Important points

• The target property is the DOM property in property binding.
• Property binding can only set properties and not attributes.
• <script> tags are not processed in property binding as well as interpolation. How Angular processes script tags with respect to property binding and interpolation could be understood with the help of following table:
  
  

app-component.component.html	app-component.component.ts	Output
<img [src]=”imageUrl” />	imageUrl = ‘<script>alert(“hello”) </script> ‘;	The url to converted to http://localhost:4200/%3Cscript%3Ealert(%22hello%22)%3C/script%3E
<p>{{imageUrl}}</p>	imageUrl = ‘<script>alert(“hello”) <script>’;	Output in browser is as string “<script>alert(“hello”)</script>” on the screen.
<span [innerHTML]=”imageUrl”></span>	imageUrl = ‘<script>alert(“hello”) <script>’;	The script tag is sanitized by the Angular with a warning displayed in the browser’s console as “WARNING: sanitizing HTML stripped some content, see https://g.co/ng/security#xss”. Nothing will be visible on the screen due to sanitization of the value of innerHTML property.

Conclusion

In this article we discussed about property binding and discussed its usage with examples.