Angular Academy · पाठ

स्टैंडअलोन कंपोनेंट बनाना

standalone फ़्लैग से कंपोनेंट घोषित करें।

पाठ 2, कुल 4 में से13 चरण

स्टैंडअलोन कंपोनेंट बनाना, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Standalone Component बनाना

Standalone component केवल एक ऐसी class है जिसे @Component से decorate किया गया है और standalone के रूप में चिह्नित किया गया है। Angular v19+ में यह default है, इसलिए अक्सर आपको यह flag लिखने की भी आवश्यकता नहीं होती।

standalone Flag

पहले decorator में standalone: true सेट किया जाता था। v19 और उसके बाद के versions में components default रूप से standalone होते हैं, इसलिए यह flag वैकल्पिक है।

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true, // optional in v19+
  template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}

Selector

selector वह custom element tag है जिसका उपयोग टेम्पलेट में component रखने के लिए किया जाता है, जैसे app-greeting।

// usage in another template:
// <app-greeting></app-greeting>

Inline Template

Inline HTML के लिए template property का उपयोग कीजिए; यह छोटे components के लिए उपयुक्त है।

@Component({
  selector: 'app-badge',
  template: '<span class="badge">New</span>'
})
export class BadgeComponent {}

External Template

बड़े views के लिए HTML file का पथ बताने हेतु templateUrl का उपयोग कीजिए।

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent {}

Styles

styles (inline) या styleUrl / styleUrls (external files) के साथ component-scoped styles जोड़िए।

@Component({
  selector: 'app-card',
  template: '<div class="card"></div>',
  styles: ['.card { padding: 16px; }']
})
export class CardComponent {}

Component Class Logic

Class body में state और behavior रहता है। Signals के साथ reactive state को fields के रूप में घोषित कीजिए।

import { Component, signal } from '@angular/core';

@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
  n = signal(0);
}

Module की आवश्यकता नहीं

ध्यान दीजिए कि यहाँ @NgModule और declarations array नहीं है। Component को जहाँ आवश्यक हो, वहाँ import करने के लिए तैयार है।

File Naming Convention

Angular convention के अनुसार files के नाम greeting.component.ts, class का नाम GreetingComponent और selector का नाम app-greeting रखा जाता है।

एक Component के अंदर दूसरे का उपयोग

Child standalone component का उपयोग करने के लिए उसे parent component के imports array में import कीजिए (अगले lesson में बताया जाएगा) और उसके selector को parent template में रखिए।

CLI से Generate करना

Angular CLI default रूप से standalone components generate करता है। ng generate component greeting चलाने पर यह आपके लिए standalone GreetingComponent का ढाँचा तैयार कर देता है।

त्वरित जाँच: Components बनाना

Standalone defaults के बारे में।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: Standalone बनाना

आप @Component के साथ standalone component बनाते हैं और चाहें तो standalone: true सेट करते हैं (v19+ में यही default है)। आप selector, template या templateUrl, वैकल्पिक styles और class logic परिभाषित करते हैं। NgModule की आवश्यकता नहीं होती। अगला विषय: dependencies को सीधे import करना।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “स्टैंडअलोन कंपोनेंट बनाना” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “स्टैंडअलोन कंपोनेंट बनाना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“स्टैंडअलोन कंपोनेंट बनाना” में मैं क्या सीखूँगा?

standalone फ़्लैग से कंपोनेंट घोषित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“स्टैंडअलोन कंपोनेंट बनाना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ