स्ट्रक्चरल डायरेक्टिव्स
स्ट्रक्चरल डायरेक्टिव्स एंगुलर में विशेष प्रकार की डायरेक्टिव्स हैं जो DOM की संरचना को डायनामिक रूप से बदलती हैं। ये डायरेक्टिव्स किसी एलिमेंट को जोड़ने, हटाने या दोहराने के लिए उपयोग होती हैं, जिससे UI को एप्लिकेशन की स्थिति के अनुसार अपडेट किया जा सके। सामान्य उदाहरणों में ngIf, ngFor और ngSwitch शामिल हैं। ngIf तत्व को स्थिति के आधार पर दिखाने या छुपाने के लिए उपयोग होता है, जबकि *ngFor किसी सूची के आइटम्स के लिए DOM एलिमेंट्स बनाता है।
स्ट्रक्चरल डायरेक्टिव्स आधुनिक Single Page Applications (SPA) में महत्वपूर्ण हैं क्योंकि ये यूजर इंटरफेस को रिएक्टिव और मॉड्यूलर बनाती हैं। इन्हें सही तरीके से लागू करने के लिए एंगुलर के कंपोनेंट्स, स्टेट मैनेजमेंट, डेटा फ्लो और लाइफसायकल की समझ आवश्यक है। इस ट्यूटोरियल में आप सीखेंगे कि स्ट्रक्चरल डायरेक्टिव्स का उपयोग करके कैसे पुन: प्रयोज्य कंपोनेंट्स बनाए जाते हैं, डेटा के आधार पर कंटेंट रेंडर किया जाता है और एप्लिकेशन की परफॉर्मेंस ऑप्टिमाइज होती है।
मूल उदाहरण
typescriptimport { Component } from '@angular/core';
@Component({
selector: 'app-structural-demo',
template: ` <h2>प्रोजेक्ट्स की सूची</h2> <ul>
<li *ngFor="let project of projects">{{ project }}</li> </ul>
<button (click)="toggleMessage()">संदेश दिखाएँ/छुपाएँ</button>
<p *ngIf="showMessage">यह एक कंडीशनल मैसेज है।</p>
`
})
export class StructuralDemoComponent {
projects: string[] = ['Project A', 'Project B', 'Project C'];
showMessage: boolean = false;
toggleMessage() {
this.showMessage = !this.showMessage;
}
}इस उदाहरण में ngFor और ngIf का उपयोग दिखाया गया है। ngFor प्रोजेक्ट्स के एरे पर इटरेशन करता है और हर आइटम के लिए एक लिस्ट एलिमेंट बनाता है। ngIf बूलियन वैरिएबल showMessage के आधार पर एक पैराग्राफ को शो या हाइड करता है। toggleMessage() मेथड बटन क्लिक पर वैरिएबल को टॉगल करता है, जिससे Angular DOM को अपने आप अपडेट करता है। इस उदाहरण में इवेंट बाइंडिंग, स्टेट मैनेजमेंट और लाइफसायकल कॉन्सेप्ट्स को दिखाया गया है, जो बड़े और डायनामिक UI के लिए आधार बनाते हैं।
व्यावहारिक उदाहरण
typescriptimport { Component, Input } from '@angular/core';
@Component({
selector: 'app-user-card',
template: ` <div *ngIf="user" class="card"> <h3>{{ user.name }}</h3> <p>Email: {{ user.email }}</p> <p *ngIf="user.isActive; else inactive">Status: Active</p> <ng-template #inactive>Status: Inactive</ng-template> </div>
`,
styles: [` .card { border: 1px solid #ccc; padding: 16px; margin: 8px 0; border-radius: 8px; }
`]
})
export class UserCardComponent {
@Input() user: { name: string; email: string; isActive: boolean } | null = null;
}
@Component({
selector: 'app-user-list',
template: ` <app-user-card *ngFor="let user of users" [user]="user"></app-user-card>
`
})
export class UserListComponent {
users = [
{ name: 'Alice', email: '[[email protected]](mailto:[email protected])', isActive: true },
{ name: 'Bob', email: '[[email protected]](mailto:[email protected])', isActive: false },
{ name: 'Charlie', email: '[[email protected]](mailto:[email protected])', isActive: true }
];
}व्यावहारिक उदाहरण में UserCardComponent और UserListComponent का उपयोग किया गया है। UserCardComponent ngIf और ng-template का उपयोग करके यूजर की स्थिति को डायनामिक रूप से दिखाता है। UserListComponent ngFor का उपयोग करके यूजर्स की लिस्ट को रेंडर करता है और डेटा को @Input के माध्यम से चाइल्ड कंपोनेंट में भेजता है। इस संरचना से कंपोनेंट्स पुन: प्रयोज्य और परफॉर्मेंट बनते हैं। स्ट्रक्चरल डायरेक्टिव्स और लाइफसायकल हुक का सही उपयोग करने से UI अपडेट्स कुशलता से होते हैं और अप्रत्याशित बग्स कम होते हैं।
स्ट्रक्चरल डायरेक्टिव्स के लिए Best Practices और सामान्य गलतियाँ:
- ngIf, ngFor और ng-template का उपयोग करें, मैन्युअल DOM मैनीपुलेशन से बचें।
- लॉजिक और प्रेजेंटेशन को अलग रखें; टेम्पलेट में सीधे डेटा चेंज करने से बचें।
- बड़ी लिस्ट के लिए *ngFor में trackBy का उपयोग करें।
-
@Input और Events का उपयोग करके पैरेंट-चाइल्ड डेटा फ्लो स्पष्ट रखें।
सामान्य गलतियाँ: -
टेम्पलेट में ऑब्जेक्ट्स या एरे को सीधे बदलना।
- स्ट्रक्चरल डायरेक्टिव्स की बहुत अधिक नेस्टिंग।
-
*ngIf में null या undefined की जाँच न करना।
Performance और Security: -
trackBy का उपयोग करें।
- ng-template से अनावश्यक DOM निर्माण से बचें।
- यूजर इनपुट की वैलिडेशन करें।
📊 संदर्भ तालिका
| एंगुलर Element/Concept | Description | Usage Example |
|---|---|---|
| *ngIf | कंडीशनल DOM एलिमेंट्स के लिए | <p *ngIf="isVisible">संदेश दिखाएँ</p> |
| *ngFor | एरे पर इटरेशन करके DOM एलिमेंट बनाना | <li *ngFor="let item of items">{{ item }}</li> |
| ng-template | कंडीशनल या पुन: प्रयोज्य टेम्पलेट | <ng-template #alt>वैकल्पिक कंटेंट</ng-template> |
| @Input | पैरेंट से चाइल्ड कंपोनेंट में डेटा भेजना | <child [data]="parentData"></child> |
| trackBy | *ngFor की परफॉर्मेंस ऑप्टिमाइजेशन | *ngFor="let item of items; trackBy: trackById" |
स्ट्रक्चरल डायरेक्टिव्स सीखने से आप डायनामिक, स्केलेबल और परफॉर्मेंट UI बना सकते हैं। अगले कदमों में उन्नत स्टेट मैनेजमेंट (NgRx), चेंज डिटेक्शन स्ट्रेटेजी और असिंक्रोनस डेटा हैंडलिंग शामिल हैं। इन्हें लागू करने से कंपोनेंट्स अधिक पुन: प्रयोज्य बनते हैं और प्रोजेक्ट की मेंटेनबिलिटी बढ़ती है। डॉक्यूमेंटेशन और प्रैक्टिकल उदाहरण इस सीखने की प्रक्रिया को मजबूत करते हैं।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी