Property Binding in Angular

In this guide let us explore the Property Binding in Angular with examples. Property binding is one way from component to view. It lets you set a property of an element in the view to property in the component. You can set the properties such as class, href, src, textContent, etc using property binding. You can also use it to set the properties of custom components or directives (properties decorated with @Input).

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

Property Binding Syntax

The Property Binding uses the following Syntax

The binding-target (or target property) is enclosed in a square bracket []. It should match the name of the property of the enclosing element.

Binding-source is enclosed in quotes and we assign it to the binding-target. The Binding source must be a template expression. It can be property in the component, method in component, a template reference variable or an expression containing all of them.

Whenever the value of Binding-source changes, the view is updated by the Angular.

Property Binding Example

Create a new application

Open app.component.html

Open the app.component.ts

We have two property binding in the example above

The title property of the component class is bound to the innerText property of the h1 tag. Disabled Property of the button is bound to the isDisabled Property of the component

Whenever we modify the title or isDisabled is the component, the Angular automatically updates the view.

Property Binding is one way

Property binding is one way as values go from the component to the template. When the component values change, the Angular updates the view. But if the values changes in the view, the Angular does not update the component.

Should not change the state of the app

The Angular evaluates the template expression (binding-source) to read the values from the component. It then populates the view. If the expression changes any of the component values, then the view would be inconsistent with the model. Hence we need to avoid using expression which will alter the component state.

It means that you cannot make use of the following

  • Assignments (=, +=, -=, …)
  • Keywords like new, typeof, instanceof, etc
  • Chaining expressions with ; or ,
  • The increment and decrement operators ++ and --
  • bitwise operators such as | and &

Return the proper type

The binding expression should return the correct type. The type that the target property expects. Otherwise, it will not work

Property name in camel case

There are few element property names in the camel case, while their corresponding attributes are not. For example rowSpan & colSpan properties of the table are in the camel case. The HTML attributes are all lowercase (rowspan & colspan)


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

Remember the brackets

The brackets, [], tell Angular to evaluate the template expression. If you omit the brackets, Angular treats the expression as a constant string and initializes the target property with that string:

Content Security

Angular inspects the template expression for untrusted values and sanitizes them if found any. For example, the following component variable evilText contains the script tag. This is what we call the script injection attack. The Angular does not allow HTML with script tags. It treats the entire content as string and displays as it is.

DOM Properties, not attributes

The property binding binds to the properties of DOM elements, components, and directives and not to HTML attributes. The angular has a special syntax for attribute binding.

Special Binding

The Angular has a special syntax for class, styles & attribute binding

The classes & styles are special because they contain a list of classes or styles. The bindings need to be more flexible in managing them. Hence we have a class & style binding.

The Property bindings cover all the properties, but there are certain HTML attributes that do not have any corresponding HTML property. Hence we have attribute binding

Class binding

You can set the class in the following ways. Click on the links to find out more

Style Binding

Similar to the class, the style also can be set using the following ways. Click on the links to find out more

Attribute Binding

Sometimes there is no HTML element property to bind to. The examples are aria (accessibility) Attributes & SVG. In such cases, you can make use of attribute binding

The attribute syntax starts with attr followed by a dot and then the name of the attribute as shown below

Property Binding Vs Interpolation

Everything that can be done from interpolation can also be done using the Property binding. Interpolation is actually a shorthand for binding to the textContent property of an element.

For example the following interpolation

Is same as the following Property binding

In fact, Angular automatically translates interpolations into the corresponding property bindings before rendering the view.

Interpolation is simple and readable. For example, the above example of setting the h1 tag, the in interpolation is intuitive and readable than the property binding syntax

Interpolation requires the expression to return a string. If you want to set an element property to a non-string data value, you must use property binding.

Property Binding Example

Binding to innerHTML with HTML tags

Here the Angular parses the b &p tags and renders it in the view.

img

Concatenate two string

Mathematical expressions

setting the color

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top