Back to results for “Standalone Components”
Angular › Components & Templates

How do standalone components change the way you organize and use components in Angular?

Intermediate

Answer

Standalone components declare their own dependencies, like which directives or other components they use, directly within the component itself using the imports array, removing the need to declare every component inside an NgModule. This simplifies the mental model and reduces boilerplate for many apps.
@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [CommonModule, RouterLink],
  template: `<a [routerLink]="['/profile']">View Profile</a>`
})
export class UserCardComponent {}
Real-world example A new Angular project built entirely with standalone components skips creating any NgModules at all, keeping each component's own dependencies clearly listed right where they are actually used.

Common follow-ups: Can standalone components be used together with existing NgModule based components in the same app?;Why did Angular introduce standalone components as the new default approach?