Course Progress 15%

Angular Templates

← Angular Standalone vs NgModule Angular Interpolation →

Angular Templates वह जगह हैं जहाँ हम UI (user interface) define करते हैं। Templates HTML के रूप में लिखी जाती हैं, लेकिन Angular में इसमें special syntax और directives भी use होते हैं। Templates component और data को जोड़ती हैं।

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

  • Angular Templates क्या हैं
  • Template syntax और expressions
  • Template directives
  • Pipes use करना
  • Template best practices

Angular Templates क्या हैं

Angular template एक HTML file या inline HTML होती है जो component के data और logic को render करती है।

Example root component template:

<h1>{{ title }}</h1>
<p>Welcome to Angular Templates!</p>

Explanation

  • {{ title }} interpolation syntax है
  • Component class में defined property template में show होती है
  • Template automatically update होती है जब data change होता है

Interpolation

Interpolation से component data को template में display किया जाता है।

// app.component.ts
export class AppComponent {
  title = 'Angular Templates Example';
  userName = 'John';
}

<!-- app.component.html -->
<h2>{{ title }}</h2>
<p>Hello, {{ userName }}!</p>

Explanation

  • Component properties title और userName template में दिख रही हैं
  • Angular automatically data bind करता है

Property Binding

HTML element properties को component data से bind किया जाता है।

<input [value]="userName">
<img [src]="imageUrl">

Explanation

  • [value] और [src] Angular syntax है
  • Property dynamically update होती है

Event Binding

Component में function call करने के लिए event binding use होती है।

// app.component.ts
export class AppComponent {
  greet() {
    alert('Hello Angular!');
  }
}

<!-- app.component.html -->
<button (click)="greet()">Click Me</button>

Explanation

  • (click) HTML event capture करता है
  • Component method greet() call होती है

Two-Way Binding

Two-way binding component और template के बीच synchronized data provide करती है।

// app.component.ts
export class AppComponent {
  userName = 'John';
}

<input [(ngModel)]="userName">
<p>Hello, {{ userName }}!</p>

Explanation

  • [(ngModel)] two-way binding syntax है
  • Input change automatically component property update करती है

Two-way binding के लिए FormsModule import करना जरूरी है:

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [FormsModule]
})
export class AppModule {}

Directives in Templates

Templates में directives use होती हैं जो DOM behavior को modify करती हैं।

Structural Directives

DOM structure को change करती हैं:

<p *ngIf="isVisible">This paragraph is visible!</p>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

Attribute Directives

Element behavior या style change करती हैं:

<p [class.highlight]="isHighlighted">Styled paragraph</p>
<p [style.color]="color">Colored text</p>

Pipes in Templates

Pipes data format करने के लिए use होती हैं:

// app.component.ts
export class AppComponent {
  today = new Date();
  price = 1234.56;
}

<p>{{ today | date:'fullDate' }}</p>
<p>{{ price | currency:'USD' }}</p>

Explanation

  • date pipe date format करती है
  • currency pipe currency format करती है

Template Expressions

Template expressions में basic JavaScript expressions use कर सकते हैं:

<p>{{ 1 + 2 }}</p>
<p>{{ userName.toUpperCase() }}</p>

Explanation

  • Angular automatically expression evaluate करती है
  • Complex logic component class में रखना best practice है

Template Reference Variables

Template में element या component को reference देने के लिए:

<input #myInput type="text">
<button (click)="logValue(myInput.value)">Log Value</button>

logValue(value: string) {
  console.log(value);
}

Explanation

  • #myInput template variable है
  • Element value directly component function में pass होती है

Template Best Practices

  • Complex logic component class में रखें
  • Templates को readable और clean रखें
  • Reusable components और directives use करें
  • Data binding, events और pipes को balance करें

Summary

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

  • Angular templates क्या हैं
  • Interpolation, property और event binding
  • Two-way binding और ngModel
  • Structural और attribute directives
  • Pipes और template expressions
  • Template reference variables
  • Best practices
← Angular Standalone vs NgModule Angular Interpolation →
  • Home