कस्टम डायरेक्टिव्स
कस्टम डायरेक्टिव्स (Custom Directives) एंगुलर में DOM एलिमेंट्स के व्यवहार (behavior) को नियंत्रित करने और उन्हें विस्तार देने के लिए बनाए जाते हैं। डायरेक्टिव्स एंगुलर की मूल संरचना का एक अभिन्न हिस्सा हैं, जिनका उपयोग हम किसी HTML एलिमेंट में नई कार्यक्षमता जोड़ने या किसी मौजूदा एलिमेंट के व्यवहार को बदलने के लिए करते हैं। कस्टम डायरेक्टिव्स हमें दोहराए जाने वाले व्यवहारों को पुन: उपयोग योग्य (reusable) कोड ब्लॉक में परिवर्तित करने की अनुमति देते हैं, जिससे एप्लिकेशन अधिक मॉड्यूलर और सुव्यवस्थित बनता है।
एंगुलर विकास में, डायरेक्टिव्स विशेष रूप से तब उपयोगी होते हैं जब हम DOM इंटरेक्शन, फॉर्म वैलिडेशन, या विजुअल इफेक्ट्स जैसे कार्यों को पुन: प्रयोज्य बनाना चाहते हैं। यह कॉम्पोनेंट-आधारित सोच (component-based thinking) को बढ़ावा देता है और डेटा फ्लो, स्टेट मैनेजमेंट तथा लाइफसाइकिल हुक्स जैसे मूलभूत एंगुलर सिद्धांतों के साथ तालमेल बैठाता है।
इस अध्याय में, आप सीखेंगे कि कस्टम डायरेक्टिव्स कैसे बनाए जाते हैं, उन्हें कॉम्पोनेंट्स और सर्विसेज के साथ कैसे जोड़ा जाता है, और आधुनिक SPAs (Single Page Applications) में उनका व्यावहारिक उपयोग कैसे किया जा सकता है। यह ज्ञान आपको परफॉर्मेंस-ऑप्टिमाइज़्ड और पुन: प्रयोज्य UI तत्व बनाने की दिशा में सक्षम करेगा।
मूल उदाहरण
typescript// app/highlight.directive.ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
@Input() appHighlight = '';
constructor(private el: ElementRef) {}
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.appHighlight || 'yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight('');
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
// app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: ` <h2 appHighlight="lightblue">माउस को इस टेक्स्ट पर लाएँ!</h2>
`,
})
export class AppComponent {}ऊपर दिए गए उदाहरण में, हमने एक कस्टम डायरेक्टिव HighlightDirective बनाई है जो किसी भी एलिमेंट के बैकग्राउंड रंग को माउस ईवेंट्स के आधार पर बदल देती है। @Directive डेकोरेटर इस डायरेक्टिव को परिभाषित करता है और इसके सेलेक्टर [appHighlight] के माध्यम से HTML में इसे लागू किया जा सकता है।
ElementRef क्लास हमें DOM एलिमेंट तक पहुंचने की अनुमति देती है, जबकि @HostListener उस एलिमेंट के इवेंट्स जैसे mouseenter और mouseleave को सुनता है। @Input का प्रयोग डायरेक्टिव को बाहरी मान (input) देने के लिए किया गया है, जिससे यह डायनामिक रूप से बदलने योग्य बनती है।
यह उदाहरण एंगुलर की प्रमुख अवधारणाओं — जैसे डेटा फ्लो और स्टेट मैनेजमेंट — को दर्शाता है। इसमें डायरेक्टिव और कॉम्पोनेंट के बीच स्पष्ट जिम्मेदारियाँ परिभाषित हैं, जिससे रीयूजेबिलिटी और परफॉर्मेंस दोनों सुनिश्चित होते हैं। ऐसे डायरेक्टिव्स वास्तविक प्रोजेक्ट्स में उपयोगकर्ता इंटरफेस में विजुअल प्रतिक्रिया (visual feedback), इंटरेक्टिव एलिमेंट्स या यूज़र एक्सपीरियंस सुधारने के लिए व्यापक रूप से उपयोग किए जाते हैं।
व्यावहारिक उदाहरण
typescript// app/auto-focus.directive.ts
import { Directive, ElementRef, AfterViewInit, Input } from '@angular/core';
@Directive({
selector: '[appAutoFocus]'
})
export class AutoFocusDirective implements AfterViewInit {
@Input() delay = 0;
constructor(private el: ElementRef) {}
ngAfterViewInit() {
setTimeout(() => {
this.el.nativeElement.focus();
}, this.delay);
}
}
// app/login.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-login',
template: ` <div class="login-container"> <input type="text" placeholder="यूज़रनेम" appAutoFocus [delay]="500" /> <input type="password" placeholder="पासवर्ड" /> <button>लॉगिन करें</button> </div>
`,
styles: [`.login-container { display: flex; flex-direction: column; width: 200px; }`]
})
export class LoginComponent {}यह उदाहरण एक उन्नत कस्टम डायरेक्टिव दिखाता है जो AfterViewInit लाइफसाइकिल हुक का उपयोग करता है ताकि व्यू के लोड होने के बाद इनपुट फील्ड को ऑटोमेटिक रूप से फोकस किया जा सके। इस डायरेक्टिव में [delay] इनपुट प्रॉपर्टी के माध्यम से विलंब (delay) सेट किया जा सकता है।
यहाँ आप देख सकते हैं कि डायरेक्टिव्स डेटा फ्लो और कॉम्पोनेंट इंटरैक्शन के साथ कैसे काम करते हैं। जब LoginComponent लोड होता है, डायरेक्टिव DOM एलिमेंट पर नियंत्रण लेता है और एक निर्धारित समय के बाद focus() मेथड को ट्रिगर करता है।
यह पैटर्न बड़े एंगुलर प्रोजेक्ट्स में उपयोगी होता है जहाँ फ़ॉर्म्स और यूज़र इंटरेक्शन का प्रबंधन आवश्यक होता है। इस प्रकार की डायरेक्टिव्स एक्सेसिबिलिटी बढ़ाने, यूज़र एक्सपीरियंस सुधारने और इनपुट हैंडलिंग को आसान बनाने में मदद करती हैं।
परफॉर्मेंस के लिए, DOM ऑपरेशन्स को हमेशा Renderer2 के माध्यम से करना चाहिए ताकि प्लेटफ़ॉर्म-सुरक्षित और क्रॉस-ब्राउज़र व्यवहार सुनिश्चित हो। डायरेक्टिव्स को यथासंभव स्टेटलेस रखना चाहिए और डेटा स्टेट मैनेजमेंट को कॉम्पोनेंट या सर्विस लेयर में संभालना चाहिए।
एंगुलर में Best Practices और सामान्य गलतियाँ:
- हमेशा
Renderer2का प्रयोग करें, क्योंकि यह डायरेक्ट DOM एक्सेस की तुलना में अधिक सुरक्षित और पोर्टेबल होता है। - डायरेक्टिव्स को पुन: प्रयोज्य (reusable) और स्वतंत्र (independent) रखें। उन्हें किसी विशेष कॉम्पोनेंट लॉजिक पर निर्भर न बनाएं।
- स्टेट म्यूटेशन (state mutation) से बचें। रिएक्टिव स्टेट मैनेजमेंट (RxJS या Signals) का उपयोग करें।
- प्रॉप ड्रिलिंग (prop drilling) को न्यूनतम रखें और आवश्यक डेटा साझा करने के लिए सर्विसेज का उपयोग करें।
- परफॉर्मेंस के लिए, उन कॉम्पोनेंट्स में
ChangeDetectionStrategy.OnPushका उपयोग करें जिन्हें डायरेक्टिव्स प्रभावित करते हैं। - डिबगिंग के दौरान डायरेक्टिव्स के ईवेंट्स को लॉग करें और
ngOnInit,ngAfterViewInitहुक्स का सही उपयोग करें। - सुरक्षा के लिए, डायरेक्टिव्स के माध्यम से DOM में किसी भी यूज़र इनपुट को इनजेक्ट करने से बचें।
📊 संदर्भ तालिका
| एंगुलर Element/Concept | Description | Usage Example |
|---|---|---|
| @Directive | कस्टम डायरेक्टिव को परिभाषित करता है | @Directive({ selector: '[appHighlight]' }) |
| ElementRef | DOM एलिमेंट तक पहुँच प्रदान करता है | constructor(private el: ElementRef) {} |
| HostListener | DOM ईवेंट्स को सुनने की अनुमति देता है | @HostListener('click') onClick() {} |
| Input | डेटा को डायरेक्टिव में पास करने के लिए उपयोग होता है | @Input() color: string |
| Renderer2 | DOM के साथ सुरक्षित इंटरैक्शन के लिए API | this.renderer.setStyle(el, 'color', 'red') |
| AfterViewInit | DOM के लोड होने के बाद क्रियाएं निष्पादित करता है | ngAfterViewInit() { ... } |
सारांश और अगले कदम:
कस्टम डायरेक्टिव्स एंगुलर की शक्ति को वास्तविक अर्थों में सामने लाते हैं। वे हमें UI व्यवहार को नियंत्रित करने, लॉजिक को पुन: प्रयोज्य बनाने और कोड की पुनरावृत्ति को कम करने की सुविधा देते हैं।
अब जब आपने कस्टम डायरेक्टिव्स की नींव समझ ली है, तो अगला कदम लाइफसाइकिल हुक्स, Renderer2, और स्ट्रक्चरल डायरेक्टिव्स (*ngIf, *ngFor) को गहराई से समझना होना चाहिए। यह आपको उन्नत स्तर पर एंगुलर एप्लिकेशन डिजाइन और परफॉर्मेंस ट्यूनिंग में मदद करेगा।
प्रायोगिक सलाह: हमेशा डायरेक्टिव्स को अलग मॉड्यूल्स में रखें, यूनिट टेस्ट करें, और कोड को पुन: उपयोग योग्य बनाएँ।
आगे सीखने के लिए Angular की आधिकारिक डॉक्स, RxJS और परफॉर्मेंस-ऑप्टिमाइज़ेशन पर अध्ययन करें।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी