टेम्पलेट सिंटैक्स संदर्भ
टेम्पलेट सिंटैक्स संदर्भ एंगुलर का एक मूलभूत और अत्यंत महत्वपूर्ण हिस्सा है, जो डेवलपर्स को DOM और कंपोनेंट्स के बीच डेटा और इंटरैक्शन को डिक्लेरेटिव तरीके से नियंत्रित करने की अनुमति देता है। यह संदर्भ उन सभी नियमों और सिंटैक्स को परिभाषित करता है जिनके माध्यम से आप एंगुलर टेम्पलेट्स में डेटा बाइंडिंग, डायरेक्टिव्स, इवेंट हैंडलिंग और कंपोनेंट इंटरैक्शन को लागू कर सकते हैं। आधुनिक वेब एप्लिकेशन और SPA में इसकी समझ आवश्यक है क्योंकि यह प्रदर्शन, पुन: उपयोग और कोड में maintainability सुनिश्चित करती है।
टेम्पलेट सिंटैक्स का उपयोग करते हुए डेवलपर्स interpolation, property binding, event binding, two-way binding, structural directives (ngIf, ngFor) और template reference variables (#variable) का सही तरीके से उपयोग सीखते हैं। यह न केवल कंपोनेंट्स के स्टेट को प्रबंधित करने में मदद करता है बल्कि डेटा फ्लो को स्पष्ट और predictable बनाता है।
इस संदर्भ में, आप सीखेंगे कि कैसे आप टेम्पलेट सिंटैक्स के माध्यम से reusable components बना सकते हैं, prop drilling और unnecessary re-renders से बच सकते हैं और Angular के lifecycle hooks का सही उपयोग कर सकते हैं। यह ज्ञान आपको वास्तविक एंगुलर प्रोजेक्ट्स में performance optimization, state management और secure coding practices लागू करने में सक्षम बनाता है।
मूल उदाहरण
typescriptimport { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-counter',
template: ` <h2>सरल काउंटर</h2> <p #counterDisplay>{{ counter }}</p> <button (click)="increment()">बढ़ाएँ</button>
`
})
export class CounterComponent {
counter: number = 0;
@ViewChild('counterDisplay', { static: true }) counterElem!: ElementRef<HTMLParagraphElement>;
increment() {
this.counter++;
console.log('काउंटर मान:', this.counterElem.nativeElement.textContent);
}
}इस उदाहरण में CounterComponent बनाया गया है। #counterDisplay नामक टेम्पलेट रेफरेंस p एलिमेंट को capture करता है। @ViewChild का उपयोग करके इसे TypeScript में counterElem के रूप में एक्सेस किया जाता है, जिससे DOM तक सुरक्षित और टाइप्ड पहुँच सुनिश्चित होती है।
increment() मेथड counter को बढ़ाता है और उसकी वर्तमान वैल्यू console में लॉग करता है। Interpolation {{ counter }} स्वचालित रूप से UI को अपडेट करता है, जिससे Angular का unidirectional data flow प्रदर्शित होता है। यह pattern prop drilling को कम करता है और state local रखता है। इसे dynamic components, forms और complex interactions में इस्तेमाल किया जा सकता है।
व्यावहारिक उदाहरण
typescriptimport { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-message',
template: ` <div #messageBox class="message-box">{{ message }}</div>
`,
styles: ['.message-box { padding: 10px; border: 1px solid #ccc; margin-top: 10px; }']
})
export class MessageComponent implements AfterViewInit {
@Input() message: string = '';
@ViewChild('messageBox') box!: ElementRef<HTMLDivElement>;
ngAfterViewInit() {
console.log('दिखाई गई संदेश:', this.box.nativeElement.textContent);
}
}
@Component({
selector: 'app-root',
template: ` <h1>संदेश एप्लिकेशन</h1> <app-message [message]="userMessage"></app-message> <input [(ngModel)]="userMessage" placeholder="अपना संदेश लिखें" />
`
})
export class AppComponent {
userMessage: string = 'नमस्ते Angular!';
}Advanced एंगुलर Implementation
typescriptimport { Component, ViewChild, ElementRef, ChangeDetectionStrategy, AfterViewInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'app-live-counter',
template: ` <h2>उन्नत काउंटर</h2> <p #display>{{ counter$ | async }}</p> <button (click)="increment()">बढ़ाएँ</button>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LiveCounterComponent implements AfterViewInit {
private counterSubject = new BehaviorSubject<number>(0);
counter$ = this.counterSubject.asObservable();
@ViewChild('display') displayElem!: ElementRef<HTMLParagraphElement>;
increment() {
this.counterSubject.next(this.counterSubject.value + 1);
}
ngAfterViewInit() {
console.log('प्रारंभिक काउंटर मान:', this.displayElem.nativeElement.textContent);
}
}टेम्पलेट सिंटैक्स संदर्भ में एंगुलर की best practices में ViewChild का सुरक्षित उपयोग, reactivity के लिए BehaviorSubject/Observable का प्रयोग और unidirectional data flow बनाए रखना शामिल है। ChangeDetectionStrategy.OnPush का उपयोग करके unnecessary re-renders को रोका जा सकता है।
सामान्य गलतियाँ prop drilling, direct state mutation और uninitialized DOM access हैं। Debugging के लिए Angular DevTools, console logs और unit tests का प्रयोग किया जा सकता है। सुरक्षा के लिए untrusted DOM को direct manipulate करने से बचें और Angular sanitizer का उपयोग करें। इन practices से modular, performant और maintainable SPA components बनाना संभव होता है।
📊 संपूर्ण संदर्भ
| एंगुलर Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| template reference variable | स्थानीय टेम्पलेट रेफरेंस | #varName | <input #username /> | @ViewChild के साथ access |
| @ViewChild | टेम्पलेट रेफरेंस एक्सेस | @ViewChild('var') varElem | @ViewChild('username') inputEl | static: true/false |
| @ViewChildren | एक जैसी कई references | @ViewChildren('var') elems | @ViewChildren('item') items | QueryList लौटाता है |
| ngIf | कंडीशनल rendering | *ngIf="condition" | <div *ngIf="isVisible"></div> | Element hide/show |
| ngFor | लूप rendering | *ngFor="let item of items" | <li *ngFor="let i of list">{{i}}</li> | trackBy recommended |
| ngClass | डायनामिक class | [ngClass]="{'class': condition}" | <div [ngClass]="{'active': isActive}"></div> | object/array/string supported |
| ngStyle | डायनामिक style | [ngStyle]="{'color': color}" | <p [ngStyle]="{'font-size.px': size}"></p> | inline CSS supported |
| @Input | Parent→Child डेटा | @Input() prop | @Input() message:string; | Data binding |
| @Output | Child→Parent event | @Output() event = new EventEmitter() | @Output() changed = new EventEmitter<number>() | EventEmitter |
| ngModel | Two-way binding | [(ngModel)]="value" | <input [(ngModel)]="username" /> | FormsModule required |
| AfterViewInit | Lifecycle hook | ngAfterViewInit() | ngAfterViewInit() {…} | View init complete |
| ChangeDetectionStrategy | Default/OnPush | Default | Change detection optimization | Reduces unnecessary renders |
| BehaviorSubject | Reactive state | new BehaviorSubject(initial) | counter$ = new BehaviorSubject(0) | Observable with initial value |
📊 Complete एंगुलर Properties Reference
| Property | Values | Default | Description | एंगुलर Support |
|---|---|---|---|---|
| static | true/false | false | ViewChild initialization timing | Angular 8+ |
| read | ElementRef/TemplateRef/Component | ElementRef | Injected type | Angular 8+ |
| trackBy | Function | undefined | ngFor optimization | Angular 2+ |
| changeDetection | Default/OnPush | Default | Change detection strategy | Angular 2+ |
| encapsulation | Emulated/None/ShadowDom | Emulated | CSS encapsulation | Angular 2+ |
| providers | Array | [] | DI services | Angular 2+ |
| animations | Array | [] | Component animations | Angular 4+ |
| interpolation | Array | ['{{','}}'] | Interpolation syntax | Angular 2+ |
| preserveWhitespaces | true/false | true | Whitespace preservation | Angular 2+ |
| outputs | Array | [] | Component events | Angular 2+ |
| inputs | Array | [] | Component inputs | Angular 2+ |
| host | Object | {} | Host bindings/listeners | Angular 2+ |
टेम्पलेट सिंटैक्स संदर्भ एंगुलर में reusable, maintainable और high-performance components बनाने की नींव है। यह developers को state management, data flow और lifecycle hooks को नियंत्रित करने में सक्षम बनाता है। आगे के अध्ययन के लिए @Input/@Output, Angular Forms, RxJS Observables और advanced directives पर ध्यान केंद्रित करें। प्रैक्टिकल प्रोजेक्ट्स और official documentation का अभ्यास mastery प्राप्त करने में मदद करेगा।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी