Your full Guide to Master Angular standalone components!

If You are Following Angular Community, You may encounter many people talking About Angular V14 new Release and its revolutionary standalone components feature. So let’s go in-depth with the Angular standalone components feature, the use cases, and the benefits of using it.

What is the Angular standalone components feature?

So, the first question here is to discover what is really Angular standalone components.

The Angular Team posted in October 2021, the first RFC about the Standalone Component Project which is the fact of making ngModule optional. In other words, we can now after publishing the Angular V14 Release use our components without declaring them inside a Module. This magical feature is already under stabilization, and it’s not meant to use for production purposes. The Angular team insists that this feature is now ready just to try because it might change before it becomes stable.

How to use Angular Standalone Components?

Syntax

To use this new concept, a new flag is provided which is the standalone flag used inside the needed decorator (@Component, @Pipe, @Directive).

We will use it with our example of the Product list component. We had in our project version of Angular V13 the declaration of the ProductListComponent inside the AppModule. And now after upgrading to the 14 Release we don’t need to declare our component in any module. let’s see how.

Here we added the standalone flag inside the @Component Decorator to tell Angular that this component is standalone ( An error will occur if we try to add this component inside @NgModule )

//product-list.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
  standalone: true,
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {

  constructor() { }

  ngOnInit(): void 
  { 
  }

}

And what to do if we want to use other non-standalone components ( this term is mine and I’m using it to distinguish between standalone and the normal components ) ?

Here we can easily import the Module containing the needed component.

//product-list.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  standalone: true,
  imports: [MatButtonModule],
  selector: 'app-product-list',
  template: `
    ...
    <button mat-button>Next Page</button>
  `,  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {

  constructor() { }

  ngOnInit(): void 
  { 
  }

}

Route your standalone Component

You may ask yourself when we take the decision to work with lazy loading, we lazy load the module. So how we will do if we want to lazy load a standalone component. For that reason, Angular updated its router APIs in order to make this components lazy loaded.

We can easily route our standalone component like the example below.

// app-routing.module.ts
export const ROUTES: Route[] = [
  {path: 'products', loadComponent: () => import('./product-list/product-list.component').then(mod => mod.ProductListComponent)},
  // ...
];

The benefits of Using Standalone Components.

Making Angular components standalone had a lot of goals and benefits. We can list some of them :

• We can consume Pipes and Components easily ( without declaring them in a module).
• We will have less code size when using this new feature.
• We will find Angular easier to learn (for new Angular developers ) .

Conclusion

In this blog post, we covered the Angular standalone component with some code snippets to more understand the case of use and its benefits. Stay tuned and give us feedback to improve our content.