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 relate your User Interface (UI) and business logic inside an Angular application.

1. Interpolation

Interpolation is a communication method that links view and component through double curly braces {{ }}. It is used to show expression values inside the template.

Syntax:

<p>{{ title }}</p>

The title component property is shown within this paragraph tag.

2. Property Binding

Using property binding, you can tie a component field to a DOM element's property.

Syntax:

<img [src]="imageUrl">

In this case, the imageUrl property of the component is connected with respect to the img element's src attribute.

3. Event Binding

Event Binding enables you to pay attention to events like clicks and carry out some action when they happen.

Syntax:

<button (click)="onClick()">Click me</button>

When the button is clicked, the 'onClick' method is executed.

4. Two-Way Data Binding

A two-way binding is basically a combination of event binding and property binding which can be used to synchronize data between template and component.

Syntax:

<input [(ngModel)]="name">

The property name of the component binds with a specific input field. Any changes in this input field will make changes to the name and vice versa.

Steps To Implement Binding Syntax In Angular

To implement binding syntax in an Angular application, follow these steps:

Step 1: Install Angular CLI if not already installed by using the below command:

npm install -g @angular/cli

Step 2: Create a new Angular Project:

ng new binding-syntax-example

Step 3: Install Required Modules. Ensure you have '@angular/forms' for two-way data binding:

npm install @angular/forms

Step 4: Generate a new component where you will demonstrate the different binding syntaxes:

ng generate component binding-demo

Project Structure

Project Structure

Dependencies

"dependencies": {
    "@angular/animations": "^18.1.0",
    "@angular/common": "^18.1.0",
    "@angular/compiler": "^18.1.0",
    "@angular/core": "^18.1.0",
    "@angular/forms": "^18.1.0",
    "@angular/platform-browser": "^18.1.0",
    "@angular/platform-browser-dynamic": "^18.1.0",
    "@angular/platform-server": "^18.1.0",
    "@angular/router": "^18.1.0",
    "@angular/ssr": "^18.1.0",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
}

Example: Let's see how all the binding syntaxes looks like in a single component by the following example. Below is the Binding-demo.component.html in which we have implemented Interpolation, Property Binding and Event Binding.

HTML

<!--binding-demo.component.html-->

<h1>{{ title }}</h1> <!-- Interpolation -->
<img [src]="imageUrl" alt="Sample Image"> <!-- Property Binding -->
<br>
<button (click)="onClick()">Click me</button> <!-- Event Binding -->
<br>
<input [(ngModel)]="name">
<p>Your name: {{ name }}</p>

Below is the Binding-demo.component.ts, in this the image URL and onClick() are defined.

JavaScript

//binding-demo.component.ts

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms'; // Import FormsModule

@Component({
    selector: 'app-binding-demo',
    standalone: true,
    imports: [FormsModule], // Import FormsModule here
    templateUrl: './binding-demo.component.html',
    styleUrls: ['./binding-demo.component.css']
})
export class BindingDemoComponent {
    title = 'Binding Syntax in Angular';
    imageUrl =
'https://media.geeksforgeeks.org/wp-content/uploads/20240812144135/GeeksforGeeks-Logo.png';
    name = '';

    onClick() {
        alert('Button clicked!');
    }
}

Below is app.component.html file, storing a Custom Component Template in it in order to run it.

HTML

<!--app.component.html-->

<app-binding-demo></app-binding-demo>

Below is the app.component.ts file, it is standalone component and storing all the imports in App component.

JavaScript

//app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { BindingDemoComponent } from './binding-demo/binding-demo.component';
import { FormsModule } from '@angular/forms';


@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, BindingDemoComponent, FormsModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'binding-syntax-example';
}

Then run the following command to run the above example:

ng serve

Output:

Create Quiz