Angular Standalone Component — Future of Angular
Tags: webdev, angular, javascript, tutorial
Published: 2022-07-07 20:28:30

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0d4nqfrpj1monr80rqo9.png)

## 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() { }
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1a6b77zdji5jqbo9v5ta.png)

## 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](https://github.com/ankitkumarsharma/tech-blogs/tree/master/angular-standalone)**

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/](https://www.ankitkumarsharma.com/)**

Also please follow me on **[GitHub](https://github.com/ankitkumarsharma)** , **[Twitter](https://twitter.com/ankit_k_sharma)** , **[Medium](https://medium.com/@ankit_k_sharma)**, and **[Dev](https://dev.to/ankit_k_sharma)** for more updates on articles with hands on code queries.

Thanks, Happy coding life !