Understanding power of Standalone component and How to use the standalone component in Angular

Angular 14 brings a remarkable new feature known as “Standalone Components” that revolutionizes the way developers build and reuse components within their applications. These standalone components are independent of any Angular module, offering a seamless way to create modular and reusable UI elements. In this blog, we’ll explore the concept of standalone components and how they can be utilized to pass dynamic values and achieve diverse outcomes with ease.

Understanding Standalone Components

Traditionally, Angular components are part of modules defined using the @NgModule decorator. These components can be used within the same module or other modules by importing the respective module. However, standalone components break free from this constraint. They can be created with the help of the Angular CLI’s --standalone flag, which generates components that are not bound to any specific module.

Creating a Standalone Component

To create a standalone component, let’s say a component named MyComponent, you can use the following Angular CLI command:

ng g c my-component --standalone

Upon generating the component, the @Component decorator in the generated my-component.ts file will have a new property standalone: true to indicate that it is a standalone component.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  template: `<p>My standalone component</p>`,
  imports: [CommonModule, FormsModule],
  standalone: true
})
export class MyComponent {}

Utilizing Standalone Components

Once you have a standalone component created, you can use it anywhere within your Angular project. To do so, simply import the standalone component into the file where you want to use it and include its selector in your template. The standalone component acts just like any other Angular component, offering seamless integration and reusability.

Input Decorator for Dynamic Values

One of the most significant advantages of standalone components is the ability to pass dynamic values through the use of input decorators. In the given example below, the app-my-component selector has three input properties: title, visible, and color.

<app-my-component [title]="appTitle" [visible]="true" [color]="app-status"></app-my-component>

The input decorator @Input() in the standalone component’s class allows you to bind these properties and receive data from its parent component.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<p>My standalone component</p>`,
})
export class MyComponent {
  @Input() title: string;
  @Input() visible: boolean;
  @Input() color: string;
}

By leveraging input properties, you can dynamically pass data from any parent component and influence the behavior and appearance of the standalone component accordingly.

Conclusion

Angular 14’s standalone components offer a groundbreaking approach to building modular and reusable UI elements. By creating components that are not bound to specific modules, developers can simplify development processes and enhance code reusability. Furthermore, the input decorator enables dynamic data binding, allowing for versatile and flexible component behaviors.

Whether you are building large-scale applications or smaller projects, standalone components prove to be a valuable tool in your Angular development arsenal. Embrace this feature to create cleaner, more maintainable, and efficient code while delivering outstanding user experiences. Happy coding!