Angular में कंपोनेंट क्लास फ़ाइल

किसी भी कंपोनेंट का मुख्य भाग होता है उसकी कार्यक्षमता, यानी वास्तव में उसका प्रोग्राम। Angular में कंपोनेंट की कार्यक्षमता TypeScript भाषा में लिखी जाती है और एक OOP क्लास को प्रस्तुत करती है।

प्रत्येक कंपोनेंट में यह क्लास .ts एक्सटेंशन वाली फ़ाइल में स्थित होती है। हमारे मुख्य कंपोनेंट में यह फ़ाइल app.component.ts होगी।

आइए इस फ़ाइल की सामग्री से परिचित हों। शुरुआत के लिए हमारे कंपोनेंट की क्लास पर ध्यान दें:

export class AppComponent {
	title: string = 'test';
}

इस क्लास पर @Component डेकोरेटर लागू होता है। यह डेकोरेटर अपने पैरामीटर के रूप में एक ऑब्जेक्ट लेता है, जो हमारे कंपोनेंट को कॉन्फ़िगर करता है:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule],
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
})

templateUrl गुण में हमारे कंपोनेंट के मार्कअप वाली फ़ाइल का पथ निर्दिष्ट किया गया है।

styleUrls गुण में हमारे कंपोनेंट के मार्कअप को स्टाइल करने वाली CSS फ़ाइलों के पथों की एक सरणी निर्दिष्ट की गई है। जैसा कि आप देख रहे हैं, स्टाइल फ़ाइलें एक से अधिक हो सकती हैं।

selector गुण में उस HTML टैग का सेलेक्टर निर्दिष्ट किया गया है, जिसमें हमारे कंपोनेंट का HTML कोड आउटपुट (माउंट) होगा। हमारे मामले में हम app-root नाम देख रहे हैं। इस नाम के अनुरूप एक ही नाम का टैग है। यह टैग src/index.html फ़ाइल में लिखा गया है। उस स्थान पर, जहाँ यह टैग लिखा गया है, हमारे कंपोनेंट का मार्कअप डाला जाएगा।

imports गुण में वे मॉड्यूल बताए गए हैं, जो हमारे कंपोनेंट में इम्पोर्ट किए जाते हैं।

standalone गुण में हमेशा true मान निर्दिष्ट होगा। अभी यह Angular की एक सर्विसिंग चीज़ है, इसलिए अभी इसमें गहराई से न जाएं।

app.component.ts फ़ाइल खोलें और इसका अध्ययन करें।

कुछ स्टाइल फ़ाइलें बनाएं और उन्हें डेकोरेटर में कनेक्ट करें।