Property binding in angular 8 Last Updated : 11 Sep, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 javascript <input style = "color:green; margin-top: 40px; margin-left: 100px;" [value]='title'> app.component.ts javascript import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'GeeksforGeeks'; } Output: Example 2: getting source of the image using property binding. app.component.html html <img [src]='src'> app.component.ts javascript import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { src = 'https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png'; } Output: Example 3: disabling a button using property binding. app.component.html html <button [disabled]='bool' style="margin-top: 20px;">GeekyButton</button> app.component.ts javascript import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { bool = 'true'; } Output: Comment More infoAdvertise with us Next Article Style Binding in Angular 17 T taran910 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Misc Similar Reads Style Binding in Angular 8 It is very easy to give the CSS styles to HTML elements using style binding in Angular 8. Style binding is used to set a style of a view element. We can set the inline styles of an HTML element using the style binding in angular. You can also add styles conditionally to an element, hence creating a 1 min read Style Binding in Angular 17 In Angular, creating visually appealing and dynamic user interfaces is important for delivering an engaging user experience. One such powerful feature is Style Binding. It allows you to dynamically apply CSS styles to HTML elements based on component data or expressions. In this article, we'll explo 2 min read Interpolation vs. Property Binding in Angular Angular, a powerful front-end framework, offers various techniques to dynamically update and display data in your applications. Two commonly used methods for this purpose are interpolation and property binding. In this article, we will learn about interpolation and property binding and also see the 4 min read Binding Syntax In Angular In Angular, binding syntax lets you determine the channel of data transmission between the component class and the template. Among various types of bindings supported by Angular are interpolation, property binding, event binding, and two-way-data-binding. Therefore, it is important to understand var 3 min read Class Binding in Angular 8 Class binding in Angular makes it very easy to set the class property of a view element. We can set or remove the CSS class names from an element's class attribute with the help of class binding. We bind a class of a DOM element to a field that is a defined property in our Typescript Code. Its synta 2 min read Event Binding in Angular 8 In Angular 8, event binding is used to handle the events raised by the user actions like button click, mouse movement, keystrokes, etc. When the DOM event happens at an element(e.g. click, keydown, keyup), it calls the specified method in the particular component. Using Event Binding we can bind da 2 min read Like