Getting started with standalone components – Angular

In angular application, each page acts as a component. Whenever you create a component, you need to import that in the respective module to make use of it. By doing so, every component in Angular is tightly bounded to the module. But from Angular v14, you can create standalone components which is independent of modules. Apart from components, you can also create standalone directive and pipes.

In this blog, we’ll explore how we can create standalone components. First let’s create an application with NgModules.

Creating a normal component

Let’s create a new project by using the below command

ng new angular-demo

Let us explore the project structure.

We have a default component created as app component. Before angular 14, you need to import the respective component in their respective module.

app.module.ts

If we checkout the AppModule, the AppComponent is being imported in the declaration section. So whenever you create a new component it will be imported in the declarations section of the respective module.

Creating a standalone component

For creating a standalone component

ng generate component home-page --standalone
(or)
ng g c home-page --standalone

The above command will create home-page as a standalone component.

home-page.component.ts

There are two new attributes introduced in this standalone component, imports and standalone. In the imports section you need to import the respective dependent modules for that component. And the standalone flag will be set to true for these components.

One important thing to note here is you cannot import standalone components in the declaration section of the modules.

How to use a standalone component

Let’s take a scenario where you need to use HomePage standalone component inside another standalone component,

about-page.component.ts

You need to import that HomePageComponent in the imports section. One you have imported it, you should be able to use it inside AboutPageComponent.

about-page.component.html

<p>About page</p>
<app-home-page></app-home-page>

Let’s say if you want to use AboutPageComponent inside another module, you should not import it in the declaration section rather you should mention it in the imports section of the module.

app.module.ts

How to bootstrap angular standalone component

You can easily bootstrap your angular standalone component. In your main.ts file, you need to pass the respective standalone component to the bootstrapApplication method.

// in the main.ts file
import {bootstrapApplication} from '@angular/platform-browser';
import {HomePageComponent} from './app/home-page.component';

bootstrapApplication(HomePageComponent);

How to lazy load a standalone component

For lazy loading modules we make use of loadChildren() menthod. For lazy loading a standalone component we make use of loadComponent() method.

app.routing.module.ts

export const ROUTES: Route[] = [
  {path: '/about-page', 
   loadComponent: () => 
   import('./about-page/about-page.component')
        .then(component => component.AboutPageComponent)},

];

The about-page route will be lazy loaded with AboutPageComponent

Conclusion

Standalone components remove the usage of NgModules in your angular application. It avoids the relationship between the component and a module making it more of a component-driven architecture kind. Whenever you want to create a shared component, hereafter you don’t want to create a shared module. Making our life more easier!