[Angular] How to Change Startup Component – Dynamic, Runtime Methods

In Angular, when we create a new project, the App Component is created default as the parent component. In some situations, you may need to change the startup component or root component. The root components can be statically changed or dynamically on runtime based on some logical business behaviours.

The startup component is the entry point of the Angular application and its first component which is presented to the viewer when the application loads. In this article, we will walk through the ways using which you can easily change the startup component of your Angular project statically or dynamically on runtime with examples.

[lwptoc]

Before we start, make sure you have installed the latest Angular CLI on your system. You can do that by executing the below command:

npm install -g @angular/cli


Now, let’s get started!

Understanding the Startup Component

Before we work on changing the startup component, let’s understand how Angular takes note of which component to load on Bootstrap.

In an Angular application, the startup component is defined in the main.ts file, which serves as the entry point of an Angular app. This is the typical content we have in the main.ts file:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

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

Here we have defined the main module which is AppModule in the startup module, so the application is started by bootstrapping this module. This module then specifies the startup component.

 

Change Startup Component Statically

In this section, we will see how to change the startup component in Angular statically at compile time:

 

1. Create a New Angular Component

First, we will create a new component, that we will set as the new startup component. By using the generate command provided by ng CLI we will create it as below:

ng generate component new-startup

 

2. Update the Startup Module

Now open the app.module.ts file, this is currently the main component of our application. Here we will import our new component and replace the bootstrap property with a new component in the @NgModule decorator:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewStartupComponent } from './new-startup/new-startup.component'; // Import the new component

@NgModule({
  declarations: [
    AppComponent,
    NewStartupComponent // Add the new component to the declarations array
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [NewStartupComponent] // Set the new component as the startup component
})
export class AppModule { }

 

4. Test Your Application

Now we are ready to test the new startup component as our application starts. We can use the following command to run our application:

ng serve


Your app should now use the new component as the startup component.

 

Change Startup Component Dynamically

In this section, we will discuss how to change the startup component dynamically that is on run time. This is useful when want to load different components based on user roles, features, or other conditional behaviours.

 

1. Create Multiple Components

First, create multiple components that you want to use as startup components. Execute the following command to create two components:

ng generate component component1
ng generate component component2

 

2. Create a Dynamic Component Loader Service

Now we will create a new service to handle the dynamic loading of components. We will use Angular’s ComponentFactoryResolver to achieve this. Run following comamnd to create a new service:

ng generate service dynamic-component-loader

 

Now, update the dynamic-component-loader.service.ts file with the following code:

import { Injectable, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DynamicComponentLoaderService {

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadComponent(component: any, target: ViewContainerRef) {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
    target.clear();
    const componentRef = target.createComponent(componentFactory);
  }
}

 

3. Update the Startup Component at Runtime

In your app.component.ts, we can create a variable to determine which component to load dynamically based on some condition:

import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponentLoaderService } from './dynamic-component-loader.service';
import { Component1Component } from './component1/component1.component';
import { Component2Component } from './component2/component2.component';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="loadComponent1()">Load Component 1</button>
    <button (click)="loadComponent2()">Load Component 2</button>
    <ng-container #dynamicComponent></ng-container>
  `
})
export class AppComponent implements OnInit {

  @ViewChild('dynamicComponent', { read: ViewContainerRef, static: true }) viewContainerRef: ViewContainerRef;

  constructor(private dynamicComponentLoader: DynamicComponentLoaderService) {}

  ngOnInit() {
    // Initially, you can load Component 1 or any default component here.
    this.loadComponent1();
  }

  loadComponent1() {
    this.dynamicComponentLoader.loadComponent(Component1Component, this.viewContainerRef);
  }

  loadComponent2() {
    this.dynamicComponentLoader.loadComponent(Component2Component, this.viewContainerRef);
  }
}

 

4. Update App Module

Make sure tp add the dynamically loaded components Component1Component and Component2Component to the declarations array in your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DynamicComponentLoaderService } from './dynamic-component-loader.service';
import { Component1Component } from './component1/component1.component';
import { Component2Component } from './component2/component2.component';

@NgModule({
  declarations: [
    AppComponent,
    Component1Component,
    Component2Component
  ],
  imports: [
    BrowserModule
  ],
  providers: [DynamicComponentLoaderService],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Summary

We have discussed with exampels, how to chanage the startup component sin Angular applciation both statically and dynamically. Static change is suitable for most scenarios but dynamica loading of component make resource management for optimal and also provides flexibility to handle runtime conditions.

Hope this will be helpful.