Angular Standalone Component — Future of Angular

Today, we will discuss about the future of Angular, that is --standalone. It refers to components, directives, or pipes that can be used independently of NgModule.
Let’s create an application without NgModule.
First we need to install/update our angular-cli, then check version via cli ng version, then create your first project without NgModule.

You can create below components without NgModule part
Standalone Components
Standalone Directives
Standalone Pipes
You can also use lazy load standalone component

What is standalone component ?

Before Angular 14, each component is declared in any of module part, whatever it is appModule or any other module, but without creating module or declared in any other module, we couldn’t use of any component.
So after release v14, new feature added on this version that is we can use component as without declare in any module, that is called standalone component.
A component based arictecture with game changer for development as in NgModule part.

Creating standalone component

After create new project, you can create new standalone component by using cli command ng g c <componentName> –-standalone, after run this command, standalone component will be added on your project.
I am creating one component ng g c home --standalone.

import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
@Component({
   selector: 'app-home',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
constructor() { }
}

Import other useful dependencies as per your requirement

After create your component, you can use and add more things like pipe or any other directives/modules and use of it.
Like, I just import shared module and will use header component on this component.

import { SharedModule } from './../shared/shared.module';
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
@Component({
   selector: 'app-home',
   standalone: true,
   imports: [CommonModule, SharedModule],
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })

Bootstrapping Standalone Component

After release Angular 14, it allow you that you can play to whole application with standalone component by bootstraping that component.
First, you have to go main.ts file
Replace your standalone component by appModule like this

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

replace this code with below code

bootstrapApplication(HomeComponent).catch(err => console.error(err));

After changed in main.ts, now you have to change in index.html file

<body>
   <app-root></app-root>
 </body>

replace this code with below code

<body>
   <app-home></app-home>  <!--your standalone component-->
 </body>

Github Source Code

So, Finally we learn about standalone component , how we can use and bootstrap in our application.

For more about it, will learn on next blog .

If you want to learn with me, please follow me on social accounts and also go through my website

https://www.ankitkumarsharma.com/

Also please follow me on GitHub , Twitter , Medium, and Dev for more updates on articles with hands on code queries.

Thanks, Happy coding life !

Blog

Angular Standalone Component — Future of Angular

Ankit Kumar Sharma

What is standalone component ?

Creating standalone component

Import other useful dependencies as per your requirement

Bootstrapping Standalone Component

Join Our Newsletter. No Spam, Only the good stuff.

Related