Standalone Components, directives and pipes in Angular

As of you who works with Angular knows that the Angular framework is revolving around the concept of ngModule.

NgModule is currently one of the core concepts in Angular. Developers new to Angular need to learn about this concept before creating even a simple application.

Given this central role of NgModule in Angular it is hard to reason about components, directives and pipes in isolation.

NgModules are the smallest reusable building blocks in Angular, not components.

The current scenario

In today's Angular, whenever we create a component, we need to declare it in a ngModule. Irrespective of its use in other modules.

@Component({...})
export class UserViewComponent {
  constructor(readonly service: UserViewService) {}
}

@NgModule({
 declarations: [UserViewComponent],
  imports: [/* dependencies here */],
  providers: [{provide: UserViewService, useClass: BackendUserViewService}],
})
export class UserViewModule {}

What are the things a standalone component will offer?

A standalone component will basically offer us to create components without creating a ngModule.

It will look something like this.

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

@Component({
  standalone: true,  
  template: `I'm a standalone component!`
})
export class HelloStandaloneComponent {}

There are a bunch of exciting ideas opens up with this concept coming into the picture

When will this feature get released?

Recently the RFC for this feature has been completed
Link

So, We can expect it to get released soon

You can also checkout this prototype link to get an early look of how it's going to be.

This feature is surely going to be a game changer

Thanks for Reading!

Thanks for reading, I hope you enjoyed it!