Skip to main content

How does a standalone component differ from a regular one?

AngularJunior~1 min read
Suggest an edit

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.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit