Angular में चाइल्ड कंपोनेंट्स

जैसा कि ट्यूटोरियल की शुरुआत में उल्लेख किया गया था, Angular में पूरा प्रोजेक्ट कंपोनेंट्स में विभाजित होता है। पिछले पाठों में हमने केवल डिफ़ॉल्ट रूप से बने मुख्य कंपोनेंट के साथ काम किया। आइए अब चाइल्ड कंपोनेंट्स बनाना सीखें।

नए कंपोनेंट्स का कोड विशेष टर्मिनल कमांड के माध्यम से Angular द्वारा स्वचालित रूप से जनरेट किया जाता है: generate component. component शब्द के बाद हमें अपने नए कंपोनेंट का नाम लिखना होगा। मान लीजिए कि हम user कंपोनेंट जनरेट करना चाहते हैं:

ng generate component user

कमांड निष्पादित करने के बाद हम देखेंगे कि हमारे पास एक नया फोल्डर app/user आ गया है। इसमें कंपोनेंट की सभी मानक फाइलें होंगी।

user.component.ts कंपोनेंट फाइल में कंपोनेंट डेकोरेटर स्वचालित रूप से बनाया जाएगा:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

इसके अलावा इस फाइल में कंपोनेंट क्लास स्वचालित रूप से बनाई जाएगी:

export class UserComponent {

}

अब हमें अपने चाइल्ड कंपोनेंट को पैरेंट कंपोनेंट से कनेक्ट करना होगा। मान लें कि पैरेंट कंपोनेंट app होगा, जो फ्रेमवर्क इंस्टॉल करते समय डिफ़ॉल्ट रूप से मौजूद होता है। आइए इसमें अपना कंपोनेंट इम्पोर्ट करें:

import { UserComponent } from './user/user.component';

कंपोनेंट डेकोरेटर में imports की में हम अपने इम्पोर्ट किए गए कंपोनेंट को निर्दिष्ट करेंगे:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // यहाँ
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

अब हम पैरेंट कंपोनेंट में चाइल्ड कंपोनेंट की सामग्री प्रदर्शित कर सकते हैं। इसके लिए पैरेंट के टेम्पलेट फाइल में एक विशेष टैग लिखना होगा, जिसका नाम चाइल्ड के @Component डेकोरेटर के selector प्रॉपर्टी में दिया गया है। हमारे मामले में यह टैग app-user है। आइए इसे पैरेंट के टेम्पलेट में लिखें:

some text
<app-user></app-user>

ProductComponent कंपोनेंट जनरेट करें। इस कंपोनेंट को अपने प्रोजेक्ट के मुख्य कंपोनेंट से कनेक्ट करें।

चाइल्ड कंपोनेंट के टेम्पलेट में परिवर्तन करें। सुनिश्चित करें कि वे ब्राउज़र में लागू होते हैं।

चाइल्ड कंपोनेंट की CSS स्टाइल्स बदलें। सुनिश्चित करें कि वे ब्राउज़र में लागू होती हैं।

चाइल्ड कंपोनेंट में name और price प्रॉपर्टीज बनाएं। उनके मानों को चाइल्ड कंपोनेंट के टेम्पलेट में प्रदर्शित करें।