The data binding in Angular and the types of binding
Binding:
Data Binding in Angular is the mechanism by which you can connect the component class properties and methods with the view template. It enables you to pass data from the component class to the view template and also allows you to respond to user events in the view and perform actions in the component class.
There are two different varieties of data binding. They are listed below.
One-way data binding:
One-way data binding occurs when a state change (from component to view template, for example) or a view change (from view template to component), respectively, affects the state.
1. Interpolation:
<h1>{{ message }}</h1>
2. Style Binding:
In Angular, style binding is a way to dynamically set the styles of an HTML element based on a component’s property values. Style binding uses square brackets [ ] syntax to bind a component property to an HTML element’s style attribute. Here’s an example:
<!-- component.ts -->
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div [style.background-color]="backgroundColor">
<p [style.color]=”textColor”>Hello World</p>
</div>
`
})
export class MyComponent {
backgroundColor = 'blue';
textColor = 'white';
}
3. Class Binding:
In Angular, class binding is a way to dynamically add or remove CSS classes to an HTML element based on a component’s property values. Class binding uses
square brackets [ ] syntax to bind a component property to an HTML element’s class attribute. Here’s an example:
<!-- component.ts -->
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div [class.my-class]="showClass">Hello World</div>
`, styles: [`
.my-class {
background-color: yellow;
font-weight: bold;
}
`]
})
export class MyComponent {
showClass = true;
}
<img [src]="url">
In Angular, attribute binding is a way to dynamically set the value of an HTML element’s attribute based on a component’s property values. Attribute binding uses square brackets [ ] syntax to bind a component property to an HTML element’s attribute. Here’s an example:
<!-- component.ts -->
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<img [src]="imageUrl" [alt]="imageAlt">
`
})
export class MyComponent {
imageUrl = 'https://example.com/image.jpg';
imageAlt = 'Example Image';
}
Note that you can use any valid HTML attribute as the binding target, and you can bind to multiple attributes at once by separating them with semicolons inside the binding brackets. You can also use expressions or functions to calculate the attribute values dynamically based on the component’s state. For example, you could use [title]=”getTitle()” to set the title attribute of an element to a value calculated from a component method named getTitle().
Event binding: This type of binding is used to listen to user events in the view template and perform actions in the component class. Event binding uses parentheses (). For example, if you have a component method named onButtonClick that you want to call when a button is clicked, you can set up the event binding like this:
<button (click)="onButtonClick()">Click me</button>
Two-way binding:
This type of binding combines property binding and event binding to create a two-way data binding between a component property and an input field. Two-way binding uses square brackets and parentheses with the ngModel directive. For example, if you have a component property named name that you want to bind to an input field, you can set up the two-way binding like this:
<input [(ngModel)]="name">