Related Articles

Related Articles

Property binding in angular 8
  • Last Updated : 11 Sep, 2020

Property Binding is a one-way data-binding technique. In property binding, we bind a property of a DOM element to a field which is a defined property in our component TypeScript code. Actually, Angular internally converts string interpolation into property binding.

In this, we bind the property of a defined element to an HTML DOM element.

Syntax:

<element [property]= 'typescript_property'>

Approach:

  • Define a property element in the app.component.ts file.
  • In the app.component.html file, set the property of the HTML element by assigning the property value to the app.component.ts file’s element.

Example 1: setting value of an input element using property binding.



app.component.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<input style = "color:green;
                margin-top: 40px; 
                margin-left: 100px;" 
[value]='title'>

chevron_right


app.component.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Example 2: getting source of the image using property binding.

app.component.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<img [src]='src'>

chevron_right


app.component.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Example 3: disabling a button using property binding.

app.component.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<button [disabled]='bool' style="margin-top: 20px;">GeekyButton</button>

chevron_right


app.component.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :