Property binding

Property binding in Angular helps you set values for properties of HTML elements or directives. With property binding, you can do things such as toggle button functionality, set paths programmatically, and shared values between components.

Property binding moves a value in one direction, from a component’s property into a target element property. i.e. from source to view.

How binding to a property

To bind to an element’s property, enclose it in square brackets, []which identifies the property as a target property. A target property is the DOM property to which you want to assign a value.

Also Read: Binding syntax in angular

For example: In below code the target property of image tag is src property.

<img [src]="imageUrl">

In most cases, the target name is the name of a property, even when it appears to be the name of an attribute. i.e. DOM property and HTML attribute share the same name but both are different and property works on DOM properties.

The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.

<img src="imageUrl">

In the above example, we omitted the brackets, now angular will not try to evaluate “imageUrl” instead it directly assign “imageUrl” as a string to src.

Setting an element property to a component property value

In the below code we are binding the src property of an <img> element to a component’s property. The component property is “imageUrl”.

<img src="imageUrl">

We need to Declare the imageUrl property in the class, in this case AppComponent.

imageUrl = '../assets/phone.png';

Setting a directive property

Setting a directive property is the same as setting a DOM property. Place the directive within square brackets and assign the value. In the below example we are setting [ngClass] property with “classes”.

<p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>

Angular applies the class special to the <p> element so that you can use special to apply CSS styles. We need to declare “classes” in AppComponent like the below.

classes = 'special';

Also Read: Angular: All about pipes template in angular

Bind values between components

Setting property is similar as above like, place the target, here childItem, between square brackets [] followed by an equal sign and the property. Here, the property is parentItem.

<child-app-component [childItem]="parentItem"></child-app-component>

To use the target and the property, you must declare them in their respective classes. Declare the target of childItem in its component class, in this case ItemDetailComponent.

@Input() childItem: string;

Next, the code declares the property of parentItem in its component class, in this case AppComponent. 

parentItem = 'lamp';

Property binding and interpolation

Often we can achieve the same result with property binding and interpolation. Like the below example.

<p><img src="{{itemImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="itemImageUrl"> is the <i>property bound</i> image.</p>

<p><span>"{{interpolationTitle}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="propertyTitle"></span>" is the <i>property bound</i> title.</p>

You can use either form when rendering data values as strings, though interpolation is preferable for readability. However, when setting an element property to a non-string data value, you must use property binding.

Also Read : Angular: Create custom pipe in Angular

Property binding can help keep content secure. Angular does not allow HTML with <script> tags, neither with interpolation nor property binding, which prevents the JavaScript from running.

Reference: Angular Guide

FAQ