Angular Interpolation

Angular में Interpolation सबसे basic और widely used feature है। Interpolation का use component class की properties और methods को template में display करने के लिए किया जाता है। यह Angular templates में data binding का simplest form है।

इस chapter में आप सीखेंगे:

• Interpolation क्या है
• Component data को template में कैसे display करें
• Methods और expressions को interpolate करना
• Best practices

Interpolation क्या है

Interpolation में double curly braces {{ }} use होती हैं।
Angular automatically component की property evaluate करके template में display करती है।

Basic Example

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'Angular Interpolation Example';
}

<!-- app.component.html -->
<h1>{{ title }}</h1>

Explanation

• Component class की title property template में show हो रही है
• Angular automatically updates करती है जब property change होती है

Interpolating Expressions

Interpolation में आप simple JavaScript expressions use कर सकते हैं:

// app.component.ts
export class AppComponent {
  a = 5;
  b = 10;
}

<p>{{ a + b }}</p> <!-- Output: 15 -->
<p>{{ a * b }}</p> <!-- Output: 50 -->

Explanation

• Angular template expression में arithmetic operations allowed हैं
• Complex logic avoid करें और component class में रखें

Interpolating Methods

Component methods को भी template में call किया जा सकता है:

// app.component.ts
export class AppComponent {
  firstName = 'John';
  lastName = 'Doe';

  getFullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

<p>Hello, {{ getFullName() }}!</p>

Explanation

• Method call कर के dynamic content display किया गया
• Angular automatically method evaluate करती है

ध्यान दें: Large computations methods में ना करें क्योंकि यह every change detection cycle में call होती है

Interpolation with HTML Attributes

Interpolation का use HTML attributes में भी किया जा सकता है:

export class AppComponent {
  imageUrl = 'https://angular.io/assets/images/logos/angular/angular.png';
}

<img src="{{ imageUrl }}" alt="Angular Logo">

Explanation

• src attribute dynamically set होता है
• Angular automatically value bind करता है

Interpolation with Strings

Strings और variables combine करने के लिए:

export class AppComponent {
  userName = 'Alice';
}

<p>Welcome, {{ 'User: ' + userName }}</p>

Explanation

• Template में string + variable dynamically display होता है

Interpolation vs Property Binding

Interpolation और property binding में अंतर:

Feature	Interpolation ({{ }})	Property Binding ([property])
Use	Mostly text/HTML content	Element properties/DOM attributes
Example	<h1>{{ title }}</h1>	<input [value]="title">
Dynamic updates	Automatically updates	Automatically updates

Interpolation Best Practices

• Complex logic component class में रखें
• Avoid calling heavy methods in interpolation
• Use for text, HTML attributes, and simple expressions
• For element properties use property binding instead

Summary

इस chapter में आपने सीखा:

• Angular Interpolation basics
• Component properties और methods को template में display करना
• Expressions और string interpolation
• Attribute interpolation
• Difference between interpolation और property binding