पाठ 4 / 32

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

ऐसे standalone components बनाएँ जो अपनी dependencies खुद import करते हैं और जिन्हें NgModule नहीं चाहिए।

NgModule की ज़रूरत नहीं

स्टैंडअलोन कंपोनेंट अपनी निर्भरताओं को imports array के ज़रिए घोषित करता है, न कि किसी NgModule में रजिस्टर होकर। Angular 17 से यह डिफ़ॉल्ट है।

ज़रूरत की चीज़ें import करना

डायरेक्टिव, पाइप, या दूसरे कंपोनेंट को सीधे उस कंपोनेंट में import करें जो उन्हें उपयोग करता है।

import { Component } from '@angular/core';
import { UserBadgeComponent } from './user-badge.component';

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [UserBadgeComponent],
  template: `
    @for (u of users; track u) {
      <app-user-badge [name]="u" />
    }
  `,
})
export class UserListComponent {
  users = ['Ada', 'Bo', 'Cy'];
}

CLI से बनाएँ

CLI standalone कंपोनेंट बनाता है, उसके टेम्पलेट, स्टाइल्स और स्पेक फ़ाइल के साथ।

ng generate component user-card
# short form:
ng g c user-card

त्वरित जाँच: स्टैंडअलोन कंपोनेंट की निर्भरताओं के लिए NgModule रजिस्ट्रेशन की जगह क्या लेता है?

  • `providers` array
  • एक अलग `@NgModule` फ़ाइल
  • `imports` array
  • declarations array
Answer

`imports` array — स्टैंडअलोन कंपोनेंट अपनी ज़रूरत की चीज़ों को सीधे `imports` में सूचीबद्ध करते हैं।