Data Binding
Data binding is the communication between your component class and its template. It's what makes Angular dynamic and responsive. Think of it as a bridge that keeps your data and UI in sync.
Angular provides four forms of data binding:
- Interpolation
{{ value }}– One-way from class to template. - Property Binding
[property]="value"– One-way from class to template. - Event Binding
(event)="handler()"– One-way from template to class. - Two-way Binding
[(ngModel)]="property"– Both ways.
Here's an example showing all four:
@Component({
selector: 'app-binding-demo',
template: `
<!-- Interpolation -->
<p>{{ message }}</p>
<!-- Property Binding -->
<img [src]="imageUrl">
<!-- Event Binding -->
<button (click)="showAlert()">Click me</button>
<!-- Two-way Binding (requires FormsModule) -->
<input [(ngModel)]="name">
<p>Hello, {{ name }}!</p>
`
})
export class BindingDemoComponent {
message = 'Hello World';
imageUrl = 'https://example.com/image.jpg';
name = '';
showAlert() {
alert('Button clicked!');
}
}
Two Minute Drill
- Data binding connects component class with template.
- Interpolation
{{}}and property binding[]send data from class to template. - Event binding
()sends data from template to class. - Two-way binding
[()](banana in a box) keeps them in sync. - Two-way binding requires importing FormsModule.
Need more clarification?
Drop us an email at career@quipoinfotech.com