Suggest an edit

Improve this article

Refine the answer for “How does a standalone component differ from a regular one?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

A **standalone component** in Angular is a component that **is not tied to a module (**`NgModule`**)** and can work on its own.

## Main differences from a regular component

1. **Does not require NgModule** - regular components must always be declared in a module's `declarations` array, standalone components do not.
2. **Direct dependency import** - the `imports` field of the `@Component` decorator can list other components, directives, and pipes needed for it to work.
3. **Simplified loading** - standalone components are easy to use with lazy loading or to embed in other standalone components without creating a separate module.
4. **Compatibility** - a regular component can still be used inside a standalone component via `imports`.

Example of declaring a standalone component:

```typescript
@Component({
  selector: 'app-standalone',
  standalone: true,
  template: `<p>I am a standalone component!</p>`
})
export class StandaloneComponent {}
```

> Conclusion: standalone components simplify the application's structure, reduce dependency on modules, and make reuse easier.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts155 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.