Angular 14 standalone component

Angular 14 standalone component

In this example, we'll see an angular 14 standalone component for rendering a router outlet.

A standalone component is a new feature in Angular 14 that allows you to create and use components without a parent module.

A component in angular is responsible for controlling a region of the user interface of the application that is rendered by the component. An angular 14 application has one root component which is the main component that would be bootstraped when the application is launched.

In Angular 14, we can bootstrap a component directly without using a module.

An example of an Angular 14 app component

This is an example of a basic angular 14 root component that renders a router outlet. In the src/app/app.component.ts file we have the following typescript code:

import { Component, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone:true,
  imports:[RouterModule]
})
export class AppComponent implements OnInit {
  title = 'Angular 14 App';

  constructor(){}

  ngOnInit(): void{}
}

The component implements the OnInit interface that provides the ngOnInit() lifecycle method that gets called when the component is initialized.

The component's decorator contains meta data about the component such as the selector that will be used to include the component in a template, and the paths of the associated template and stylesheets that will be used to render and style the component view. Moreover, we need to add standalone:true to make the component standalone.

Since the component doesn't have a parent module, we need to the imports array to import the router module.

In the src/app/app.component.html, we place the router outlet:

<router-outlet></router-outlet>

In the src/main.ts file, we need to bootstrap the application component as follows:

import { CommonModule, registerLocaleData } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { enableProdMode, importProvidersFrom } from '@angular/core';
import { bootstrapApplication} from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { routes } from './app/app-routing';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';


if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent,
  {
    providers:[
      importProvidersFrom(
        RouterModule.forRoot(routes),
        BrowserAnimationsModule,
        HttpClientModule)
    ]
  });

Generate a component with Angular CLI v14

You can use Angular CLI v14 to scaffold a simple component as follows:

ng g component footer

In the src/app/footer.component.html file we have the following html code:

<p>
    ngApp (c) 2022
</p>

In the src/app/footer.component.css file we have the following css code:

p {
  margin: 1rem; 
}