Understanding Property Binding in Angular 11

Let’s take a look at property binding in Angular, a one-way data-binding technique used to transfer data.

Angular

Angular, Google’s JavaScript (TypeScript) framework for building web applications, mobile or desktop with over 70,000 stars on GitHub. Maintained by the Angular Team at Google and a host of community members and organizations.

Before You Start

To be able to follow through in this article’s demonstration you should have:

• An integrated development environment like VS Code
• Node version 11.0 installed on your machine
• Node Package Manager version 6.7 (it usually ships with Node installation)
• Angular CLI version 8.0 or above
• The latest version of Angular (version 11)

// run the command in a terminal
ng version

Confirm that you are using version 11, and update to 11 if you are not.

Other things that will be nice-to-haves are:

• Working knowledge of the Angular framework at a beginner level

In this post, you will be introduced to property binding in Angular, what it is used for and how it works.

Property Binding

In Angular one of the ways to pass down values from a component to its template with a set value is through property binding. It is a great example of a one-way data-binding technique used to transfer data.

Syntax

<template_element [property]= 'property'>

So basically at the backend, as we bind a template or DOM element to a defined field, this field is defined inside the component Angular just turns the string interpolation to property binding.

Why Property Binding Is Important

One of the great things about property binding is the control you get over your template elements from the component itself. Angular finds really great ways to give developers full control of the tools they work with and this is a prime example of that. The developer can dictate how data flows and gets updated with his own logic on any DOM element without restrictions. Another important reason property binding is cool is that it can help make your presentation code clean and re-usable too.

What We Will Be Building

We will illustrate property binding in Angular in a newly created Angular project just to show you how it works. Open a location in your PC and create a new angular project by running:

ng new testapp

After choosing specifications like styles sheet type and router options, you’ll have an Angular app scaffold ready. You can run the app in development with these commands:

cd testapp
ng serve

If you visit your app.component.html file, you will see that there is a lot of boilerplate code. Let us strip everything down to look like old Angular 7. Copy the code block below into the app.component.html file:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>
<router-outlet></router-outlet>

We will see a few simple use cases where you can easily do property binding.

Change the Color Style of an Element

Your app component file should look something like this:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testapp';
paint = 'green';
}

Here we have defined a variable and assigned it a property of green. Now to bind it to one of the list items, we can use the syntax we have already seen in this article.

<template_element [property]= 'property'>

Copy the code block below and paste it into your template file (app.component.html):

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" >
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2 [ngStyle]="{color:paint}" >Angular blog</h2>
  </li>
</ul>
<router-outlet></router-outlet>

If you look at the last header tag, you will notice we have bound the value in the variable we created (paint) in the component to the color value of the inline style we specified here.

Passing an Image Source Link

To have an image source link defined in our component and then passed to the view, copy a random image you already have on your machine to the assets folder. Then copy the code below into your app.component.html file:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" >
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2 [ngStyle]="{color:paint}" >Angular blog</h2>
  </li>
</ul>
<img [src]="src">
<router-outlet></router-outlet>

You can see that the image source is being bound to the variable called src. Now open your component.ts file and set the variable, like this below:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'cdktest';
  paint = 'green';
  src = '../assets/d.jpg';  
}

Disabling a Button with Property Binding

Finally let us have a button disabled through the value of a bound property. In your template file, add a button to your code:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" >
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2 [ngStyle]="{color:paint}" >Angular blog</h2>
  </li>
</ul>
<button [disabled]='switch'>Test Button</button>
<img [src]="src">
<router-outlet></router-outlet>

You see we are using the DOM disable button and we are assigning it to the value of switch. Let us now define switch with a true value. This is because disabled takes a boolean value.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'cdktest';
  paint = 'green';
  src = '../assets/d.jpg';  
  switch = 'true';
}

Now if you check the button in your browser, you will see that is currently disabled and if you change the value to false it becomes enabled.

Wrapping Up

In this post we have taken a look at property binding in Angular, what it is, why it is important and most of all how it is used. You can see it has multiple use cases and so you can play around with it and find more resourceful ways to make it a part of your Angular workflow. Happy hacking!