Standalone Components in Angular 14: Breaking Free from Modules

Angular 14 introduced a significant concept: standalone components. These components operate independently, without relying on the traditional NgModule structure. Let’s delve into the details with an example:

Table of Contents

What are Standalone Components?

Before Angular 14, usually when we create a component, we must pass it inside the declarations array of a module. If we do not do that, Angular will throw an error about it during compilation.

What are Standalone Components?

Imagine a component existing outside a predefined module, responsible for its dependencies and functionalities. That’s the essence of standalone components. They offer several advantages:

Simplified structure: No need for NgModules, leading to cleaner code and faster development.
Improved performance: Tree-shakeable, meaning unused components are omitted from the final bundle, reducing application size.
Enhanced modularity: Components are self-contained units, promoting reusability and easier maintenance.

Example: A Standalone Counter Component

Here’s how a basic standalone counter component might look:

TypeScript
@Component({
  standalone: true,
  imports: [], // Note the absence of NgModule imports
  selector: 'app-counter',
  template: `<button (click)="count++">Count: {{ count }}</button>`,
})
export class CounterComponent {
  count = 0;
}

Key Points:

The @Component decorator now has a standalone: true flag.
We remove the imports array since there’s no NgModule to reference.
The component defines its template and logic independently.

Using Standalone Components:

Standalone components can be used in two ways:

Directly in another standalone component:

<app-counter></app-counter>

2. Inside a NgModule (for compatibility with existing code):

@NgModule({
  imports: [
    CommonModule,
    // Other imports
    AppComponent,
    CounterComponent, // Standalone component imported here
  ],
  // ...
})
export class AppModule {}

Key Points about Standalone Components:

No NgModules: Standalone components don’t require a declaration in an NgModule. This simplifies code and reduces boilerplate.
Marked with standalone: true: You explicitly mark a component as standalone using the standalone: true decorator in the component class.
Tree-shakeable: Standalone components are tree-shakable, meaning unused components are removed during the build, improving performance.
Dependency Management: They can import other standalone components and NgModules, but cannot export dependencies themselves.

When to Use Standalone Components:

Standalone components should be used in the below scenario.

Small, reusable components
Components that don’t have complex dependencies
Creating new applications from scratch

Command to create a standalone component

If you explicitly want to create a standalone component in an Angular Project, then use the below command

ng g c mycomponent --standalone

What, if I don’t want a Standalone Component based Angular Application?

Use the below command to create a project without a standalone component.

ng new myprojectname --no-standalone

Additional Notes:

Standalone components cannot export dependencies yet.
They can import other standalone components and NgModules for shared functionality.
Consider using them for small, reusable components and gradually migrating your existing codebase.

Summary:

Angular 14 introduces the standalone component—a component not part of any ngModule. Components, directives, and pipes can now be marked as standalone: true. Angular classes marked as standalone do not need to be declared in a NgModule.

A standalone component is a type of component that doesn’t belong to any specific Angular module.

Resources:

Angular documentation: https://angular.io/guide/standalone-components
In-depth guide: https://angular.io/guide/standalone-components

I hope this explanation with the example clarifies the concept of standalone components in Angular 14. Feel free to ask any further questions!