# Standalone Components — Angular

Source: https://www.geekswithgeeks.com/en/angular/ng-standalone-components

> The modern default — no NgModule required.

## No NgModule needed

A **standalone** component declares its own dependencies via the `imports` array instead of being registered in an NgModule. It's the default since Angular 17.

## Importing what you need

Import directives, pipes, or other components directly into the component that uses them.

```typescript
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'];
}
```

## Generate with the CLI

The CLI scaffolds a standalone component with its template, styles, and a spec file.

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

**Quiz:** What replaces NgModule registration for a standalone component's dependencies?

- [ ] The `providers` array
- [x] The `imports` array
- [ ] A separate `@NgModule` file

*Answer:* The `imports` array. Standalone components list what they need directly in `imports`.