एट्रिब्यूट डायरेक्टिव्स
एट्रिब्यूट डायरेक्टिव्स एंगुलर में एक महत्वपूर्ण फीचर हैं, जो DOM तत्वों के व्यवहार, शैली या विशेषताओं को डायनामिक रूप से बदलने की अनुमति देते हैं, बिना उनकी संरचना को बदले। ये directives आधुनिक Single-Page Applications (SPAs) में इंटरैक्टिव, मॉड्यूलर और पुन: प्रयोज्य UI components बनाने के लिए आवश्यक हैं। एट्रिब्यूट डायरेक्टिव्स का उपयोग करते हुए, डेवलपर्स declarative तरीके से एलिमेंट्स पर लॉजिक लागू कर सकते हैं, जिससे components स्थिति परिवर्तनों, यूज़र इनपुट या बाहरी डेटा पर प्रतिक्रिया कर सकते हैं।
एंगुलर डेवलपमेंट में, एट्रिब्यूट डायरेक्टिव्स का उपयोग तब किया जाता है जब किसी एलिमेंट की विज़ुअल स्टाइल या व्यवहार डायनामिक होना चाहिए, जैसे हाइलाइट करना, शर्तों के आधार पर CSS क्लास लागू करना, या किसी property को component state के अनुसार बदलना। ये directives Angular के core concepts जैसे components, state management, data flow और lifecycle hooks के साथ मिलकर काम करते हैं, जिससे complex functionality encapsulated और reusable बनती है।
इस ट्यूटोरियल में, आप सीखेंगे कि एट्रिब्यूट डायरेक्टिव्स को कैसे बनाया जाए, Input properties का उपयोग कैसे किया जाए, HostListener के माध्यम से user interactions को कैसे संभाला जाए, और lifecycle hooks जैसे OnChanges का उपयोग करके डायनामिक updates पर प्रतिक्रिया कैसे दी जाए। साथ ही, performance optimization, prop drilling, unnecessary re-renders और state mutations जैसी सामान्य pitfalls को भी कवर किया जाएगा।
मूल उदाहरण
typescriptimport { Directive, ElementRef, Renderer2, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
@Input() highlightColor: string = 'yellow';
constructor(private el: ElementRef, private renderer: Renderer2) {}
@HostListener('mouseenter') onMouseEnter() {
this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', this.highlightColor);
}
@HostListener('mouseleave') onMouseLeave() {
this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
}
}यह उदाहरण एक बेसिक एट्रिब्यूट डायरेक्टिव दिखाता है, जो किसी एलिमेंट की background color को माउस hover पर बदलता है। @Directive decorator directive के selector को define करता है, जिससे इसे template में attribute की तरह इस्तेमाल किया जा सकता है। @Input() property highlightColor directive को flexible और reusable बनाती है, क्योंकि parent component template से color value pass की जा सकती है।
HostListener decorator mouseenter और mouseleave events को सुनता है। Renderer2 का उपयोग DOM manipulation को सुरक्षित और Angular-compatible तरीके से करता है। Renderer2 के बिना direct DOM changes Angular के change detection mechanism को bypass कर सकते हैं। इस directive pattern का लाभ यह है कि logic component से अलग encapsulated है, जिससे prop drilling और unnecessary re-renders जैसी समस्याएं नहीं आती हैं।
व्यावहारिक उदाहरण
typescriptimport { Directive, ElementRef, Renderer2, HostListener, Input, OnChanges, SimpleChanges } from '@angular/core';
@Directive({
selector: '[appDynamicHighlight]'
})
export class DynamicHighlightDirective implements OnChanges {
@Input() appDynamicHighlight: string = 'lightblue';
constructor(private el: ElementRef, private renderer: Renderer2) {}
ngOnChanges(changes: SimpleChanges) {
if (changes['appDynamicHighlight']) {
this.updateBackgroundColor(this.appDynamicHighlight);
}
}
@HostListener('mouseenter') onMouseEnter() {
this.updateBackgroundColor(this.appDynamicHighlight);
}
@HostListener('mouseleave') onMouseLeave() {
this.updateBackgroundColor('');
}
private updateBackgroundColor(color: string) {
this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
}
}यह advanced example dynamic updates को handle करता है। ngOnChanges lifecycle hook का उपयोग किया गया है ताकि directive input property appDynamicHighlight में परिवर्तन को detect कर सके और element की background color को update कर सके। updateBackgroundColor method DOM manipulation को centralize करती है, जिससे code maintainable और DRY बनता है।
HostListener user interactions को manage करता है जबकि Renderer2 DOM updates को सुरक्षित और Angular-compatible बनाता है। यह pattern dynamic theming, interactive forms या highlightable lists जैसी real-world applications में उपयोगी है। Input properties, lifecycle hooks और event listeners के संयोजन से modular, performant और reusable directives तैयार होते हैं।
एंगुलर में best practices में logic को template से अलग रखना, Renderer2 के माध्यम से safe DOM manipulation, और lifecycle hooks का उपयोग करके dynamic changes को efficiently handle करना शामिल है। Input properties का उपयोग directive के state को control करने के लिए किया जाना चाहिए।
सामान्य pitfalls में prop drilling, unnecessary re-renders और direct DOM manipulation शामिल हैं। performance optimization के लिए heavy calculations को frequently triggered events में avoid करना चाहिए। security considerations में direct innerHTML या user-provided content से XSS attacks से बचाव शामिल है। Angular DevTools debugging और efficiency analysis के लिए उपयोगी है।
📊 संदर्भ तालिका
| एंगुलर Element/Concept | Description | Usage Example |
|---|---|---|
| @Directive | कस्टम attribute directive define करता है | @Directive({selector: '[appHighlight]'}) |
| @Input | Parent component से data receive करने के लिए | @Input() highlightColor: string |
| HostListener | DOM events को listen करने और respond करने के लिए | @HostListener('mouseenter') onMouseEnter() |
| Renderer2 | Safe, Angular-compatible DOM manipulation के लिए | this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow') |
| OnChanges | Input property changes को detect करने के लिए | ngOnChanges(changes: SimpleChanges) |
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी