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