Angular 7 Property Binding

To pass data from the component class (component.ts), the Angular 7 property binding is used. It also sets the value of the given element in the user-end (component.html). Being an example of one-way data binding, property binding transfers the data from the component to the class. The property binding is so important because it facilitates the developers to control the properties of the elements.

Example:

<p>  
  Server is working fine.  
</p>  
<button class="btn btn-primary">Add Server</button>

component.ts file:

import { Component, OnInit } from '@angular/core';  
 
@Component({  
  selector: 'app-server',  
  templateUrl: './server.component.html',  
  styleUrls: ['./server.component.css']  
})  
export class ServerComponent implements OnInit {  
 
  constructor() { }  
 
  ngOnInit() {  
  }  
 
}

Output:

Explanation:

In the above example, we are adding a button to the “component.html” page.

The working of property binding:

Example 1:

<p>  
  Server is working fine.  
</p>  
<button class="btn btn-primary" disabled>Add Server</button>

//component.ts file:

import { Component, OnInit } from '@angular/core';  
 
@Component({  
  selector: 'app-server',  
  templateUrl: './server.component.html',  
  styleUrls: ['./server.component.css']  
})  
export class ServerComponent implements OnInit {  
 allowNewServer = false;  
 
  constructor() {  
    setTimeout(() =>{  
      this.allowNewServer = true;  
    }, 4000);  
  }  
 
  ngOnInit() {  
  }  
 
}

//component.html file:

<p>  
  Server is working fine.  
</p>  
<button class="btn btn-primary"  
        [disabled]="allowNewServer">Add Server</button>

Output:

Explanation:

In the above example, we are demonstrating property binding where a property is bound dynamically. Here, we are using the disabled attribute to disable a button. When the button is disabled, a new property “allowNewServer” is added in the “component.ts” file. It will disable the button after a settable time, automatically. The time set here is 4000 millisecond or 4 seconds, i.e, the button will be disabled automatically, after 4 seconds.

Example 2:

<p>  
  Server is working fine.  
</p>  
<button class="btn btn-primary"  
        [disabled]="!allowNewServer" >Add Server</button>

Explanation:

In the above example, we are allowing the disabled button automatically after 5 seconds.

Similarities b/w String Interpolation and Property Binding:

Example: String Interpolation:

<p>  
  Server is working fine.  
</p>  
<button class="btn btn-primary"  
        [disabled]="!allowNewServer" >Add Server</button>  
<h2>{{allowNewServer}}</h2>

Output:

Explanation:

In the above example, <h2>{{allowNewServer}}</h2> is used to specify string interpolation.

Example: Property Binding:

<p>  
  Server is working fine.  
</p>  
<button class="btn btn-primary"  
        [disabled]="!allowNewServer" >Add Server</button>  
<h3 [innerText]= "allowNewServer"></h3>

Output:

Explanation:

In the above example, we are using the property binding. Here, the result is the same as that with string interpolation, however, string interpolation has some limitations when compared to property binding.