SharePointCafe.Net

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:

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.

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:

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:

1. 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!