Learn About Dynamic EntryComponent in Angular

Introduction

Angular is an open-source Javascript framework to build web applications in HTML and Javascript. It will provide us a great deal of flexibility and power when building our apps.

Entry component

A bootstrap component is an entry component that Angular loads into a DOM Module at application lunch and other root components are loaded dynamically into entry components.

There are two main kinds of entry components:

The bootstrapped root component. (Router)
A component you specify in a route definition. (Entry Component)

In the below example, the App Component is a root component so Angular loads this dynamically:

Example:

Create a New Project

Create a new folder named DynamicComponentsInAngular9 and select this folder in Visual Studio Code

Install Angular 9

Open Terminal windows in Visual Studio Code install Angular 9, as shown below:

To install the CLI using npm, use the command: npm install -g @angular/cli

To create a sample project with CLI, use the command: ng new DynamicComponents

Structure of Project

Create Children Components

Create a new folder named components in src\app folder. In this folder, create children components as shown below:

Home Component

Create a new folder named hi in src\app\components folder. In this folder, create a new file named Home.component.ts

ng g c Home --skipTests=true

Dashboard Component

Create a new folder named hi in src\app\components folder. In this folder, create a new file named Dashboard.component.ts

ng g c Dashboard --skipTests=true

ContactInfo Component

Create a new folder named hi in the src\app\components folder. In this folder, create a new file named ContactInfo.component.ts

ng g c ContactInfo--skipTests=true

Open Main Component

import {
Component,
OnInit
} from '@angular/core';
import {
HomeComponent
} from './home/home.component';
import {
DashboardComponent
} from './dashboard/dashboard.component';
import {
ContactInfoComponent
} from './contact-info/contact-info.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'DynamicComponents';
dynamicCom: any;
ngOnInit() {
this.dynamicCom = HomeComponent;
}
dynamicDash() {
this.dynamicCom = DashboardComponent;
}
dynamicContact() {
this.dynamicCom = ContactInfoComponent;
}
dynamicHome() {
this.dynamicCom = HomeComponent;
}
}
// Root Component html
<div class="container ml-10 mt-2" style="width:100;">
<a class="navbar-brand" href="#">
<img src="assets/c2.jpg" width="1111" height="200">
</a>
<h2 style="text-align:center;text-decoration:dotted;background-color:gainsboro;">Dynamic Entry Components </h2>
<nav class="navbar navbar-expand-lg navbar-white bg-white pt-4">
<button class="btn btn-outline-primary col offset-1" (click)="dynamicHome()" type="submit">Home</button>
<button class="btn btn-outline-primary col offset-1" (click)="dynamicDash()" type="submit">Dashboard</button>
<button class="btn btn-outline-primary col offset-1" (click)="dynamicContact()" type="submit">ContactInfo</button>
</nav>
<div class="pt-5">
<ng-container *ngComponentOutlet="dynamicCom"></ng-container>
</div>
</div>

Open Component to Module and see that the Child components are added:

import {
BrowserModule
} from '@angular/platform-browser';
import {
NgModule
} from '@angular/core';
import {
AppRoutingModule
} from './app-routing.module';
import {
AppComponent
} from './app.component';
import {
DashboardComponent
} from './dashboard/dashboard.component';
import {
HomeComponent
} from './home/home.component';
import {
ContactInfoComponent
} from './contact-info/contact-info.component';
@NgModule({
declarations: [
AppComponent,
DashboardComponent,
HomeComponent,
ContactInfoComponent
],
entryComponents: [
HomeComponent,
DashboardComponent,
ContactInfoComponent
], // dynamically added components
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent] // bootstrapped entry component
})
export class AppModule {}

Run Application

In Terminal windows in Visual Studio Code, type: ng serve --open, program. It will open the URL http://localhost:4200/ in the browser.

Output