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

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

app.component.ts

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

<img [src]='src'>

app.component.ts

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

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

app.component.ts

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

Output:

taran910

News

Improve

Style Binding in Angular 8

Similar Reads

Difference between One-way Binding and Two-way Binding

In this article, we will learn the concept of data binding in Angular. We will also explore its types & examine the differences between one-way binding and two-way binding in angular. Data binding is a way to synchronise the data between the model and view components automatically. AngularJS implements data-binding that treats the model as the

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 key differences between them. Table of Content Int

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 dynamically styled element. Syntax: <element [s

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 data from DOM to the component and hence can use that

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 syntax is like that of property binding. Syntax: <el

Angular PrimeNG Form SelectButton Value Binding Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the Form SelectButton Value Binding Component in Angular PrimeNG. The SelectButton Component is used to make

Angular PrimeNG Form RadioButton Dynamic Values, Preselection, Value Binding and Disabled Option

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the Form RadioButton Dynamic Values, Preselection, Value Binding, and Disabled Option in Angular PrimeNG. The

How to achieve Two-Way Data Binding in Angular with ngModel ?

Two-way Data Binding in Angular allows you to automatically synchronize data between a component class property and an input element (e.g., an input field) in your template. To achieve this binding, it's typically used with Angular [(ngModel)] directive. This is basically the combination of the Property Binding & the Event Binding, which helps

Angular PrimeNG Form Listbox Value Binding Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn how to use the ListBox Component in Angular PrimeNG. ListBox component is used to make a list component from which we c

Angular PrimeNG Form Password Model Binding

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the Password Component in Angular PrimeNG. The Password Component is used to represent the strength indicator

Angular PrimeNG Form Inputtext Model Binding

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the InputText Component in Angular PrimeNG. Let’s learn about the properties, styling & syntaxes that wil

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 explore more about Style Binding. Prerequisites:Angular

Angular PrimeNG Form MultiSelect Value Binding Component

PrimeNG is an AngularJS component library developed by PrimeFaces. It provides developers to select from a wide range of already implemented themes and UI components for their applications. In this article, we will discuss the Angular PrimeNG Form MultiSelect Value Binding Component. The MultiSelect Component allows the user to select multiple opti

Angular PrimeNG Form Checkbox Dynamic Values, Preselection, Value Binding and Disabled Option

Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will be seeing Angular PrimeNG Form Checkbox Dynamic Values, Preselection, Value Binding, and Disabled Option Component. The Checkbox Component pro

Angular PrimeNG Form Dropdown Value Binding Component

Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will be seeing Angular PrimeNG Form Dropdown Value Binding Component. The Form Dropdown Component provides the user with a list of options from which any one option ca

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 various type of binding in order to approximately rel

AngularJS Data Binding

In this article, we will see the Data Binding in AngularJS, along with understanding the various types of Data Binding available with their implementations. Angular provides a function Data Binding which helps us to have an almost real-time reflection of the input given by the user i.e. it creates a connection between Model and View. Data Binding i

Node.js This Binding

Arrow functions don’t bind their own 'this' value. Instead, the 'this' value of the scope in which it was defined is accessible. This makes arrow functions bad candidates for methods, as this won’t be a reference to the object the method is defined on. For methods, ES6 provides a new method definition syntax. You can see this in the definition of t

ReactJS | Binding Event Handlers

In ReactJS, we need to bind events so that the this keyword would not return an "undefined". In this article, we are going to see the different ways in which we can bind event handlers in ReactJS. First, let's make a new class component and name it Binding.js. Make a simple class component with a simple message state and render a simple button as s

How to avoid binding by using arrow functions in callbacks in ReactJS?

In React class-based components when we use event handler callbacks, it is very important to give special attention to the 'this' keyword. In these cases the context this is undefined when the callback function actually gets invoked that's why we have to bind the context of this. Now if binding all the methods of each class is very annoying. Instea

Vue.js Two Way Binding Model

Vue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supporting libraries. The v-model directive makes two-wa

Two-way Data Binding in AngularJS

In this article, we will see the Data Binding, along with understanding how the flow of code is from a Typescript file to an HTML file & vice-versa through their implementation. In AngularJS, Data Binding refers to the synchronization between the model and view. In Two-way data binding, the flow of data is bidirectional i.e. when the data in th

Vue.js Form Input Binding with Multiline text

Vue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. We can create Single Page Applications as well as Full Stack applications. Input Binding is used to sync and maintain the state of form input elements with the corresponding state in javascript. So, Vue.

Types of data binding with template in Vue.js

In this article, we will see different ways to bind data with the template in Vue.js, along with understanding their implementation through the examples. When we wish to utilize our variables or data within the template, we generally use the mustache syntax(double curly braces). However, this isn't permitted in Vue for HTML elements. In order to us

Vue.js Form Input Binding trim Modifier

Vue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. We can create Single Page Applications as well as Full Stack applications. Input Binding is used to sync and maintain the state of form input elements with the corresponding state in javascript. So Vue.j

Vue.js Form Input Binding with Radio Option

Vue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. We can create Single Page Applications as well as Full Stack applications. Input Binding is used to sync and maintain the state of form input elements with the corresponding state in javascript. So Vue.j

Vue.js Form Input Value Binding

Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers to integrate Vue.js in any application at any stag

Vue.js Form Input Binding number Modifier

Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers to integrate Vue.js in any application at any stag

Vue.js Form Input Binding lazy Modifier

Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers to integrate Vue.js in any application at any stag

What is the difference between one-way data flow and two-way data binding in vue.js?

Vue.js is an open-source front-end JavaScript framework for building user interfaces and single-page applications. It follows Model-View-ViewModel (MVVM) architecture pattern. Vue.js has many in-built directives for DOM manipulation such as v-bind, v-on, v-model, etc. In this article, we will learn about the one-way data binding & two-way data

Article Tags :