1 Answer

0 votes
by
 
Best answer

Angular 7 Property Binding

In Angular 7, property binding is used to pass data from the component class (component.ts) and setting the value of the given element in the user-end (component.html).

Property binding is an example of one-way databinding where the data is transferred from the component to the class.

The main advantage of property binding is that it facilitates you to control elements property.

For example

We are going to add a button to "component.html" page.

  1. <p>  
  2.   Server2 is also working fine.  
  3. </p>  
  4. <button class="btn btn-primary">Add Server</button>  

component.ts file:

  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-server2',  
  5.   templateUrl: './server2.component.html',  
  6.   styleUrls: ['./server2.component.css']  
  7. })  
  8. export class Server2Component implements OnInit {  
  9.   
  10.   constructor() { }  
  11.   
  12.   ngOnInit() {  
  13.   }  
  14.   
  15. }  

Output:

Angular 7 Property Binding

Let's see how property binding works?

First, we are going to disable the button by using disabled attribute.

  1. <p>  
  2.   Server2 is also working fine.  
  3. </p>  
  4. <button class="btn btn-primary" disabled>Add Server</button>  

Now, the button is disabled.

Let's add a new property "allowNewServer" in "component.ts" file which will disable the button automatically but after a specific (settable) time.

component.ts file:

  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-server2',  
  5.   templateUrl: './server2.component.html',  
  6.   styleUrls: ['./server2.component.css']  
  7. })  
  8. export class Server2Component implements OnInit {  
  9.  allowNewServer = false;  
  10.   
  11.   constructor() {  
  12.     setTimeout(() =>{  
  13.       this.allowNewServer = true;  
  14.     }, 5000);  
  15.   }  
  16.   
  17.   ngOnInit() {  
  18.   }  
  19.   
  20. }  

component.html file:

  1. <p>  
  2.   Server2 is also working fine.  
  3. </p>  
  4. <button class="btn btn-primary"  
  5.         [disabled]="allowNewServer">Add Server</button>  

Output:

Angular 7 Property Binding

Click here to read more about Angular JS
Click here to read more about Insurance

Related questions

0 votes
asked Sep 13, 2019 in Angular by ivor2019
0 votes
asked Sep 13, 2019 in Angular by ivor2019
0 votes
asked Sep 13, 2019 in Angular by ivor2019
0 votes
asked Sep 13, 2019 in Angular by ivor2019
0 votes
asked Sep 13, 2019 in Angular by ivor2019
...