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:
In the below example, the App Component is a root component so Angular loads this dynamically:
Example:
Create a new folder named DynamicComponentsInAngular9 and select this folder in Visual Studio Code
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 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
  1. import {
  2. Component,
  3. OnInit
  4. } from '@angular/core';
  5. import {
  6. HomeComponent
  7. } from './home/home.component';
  8. import {
  9. DashboardComponent
  10. } from './dashboard/dashboard.component';
  11. import {
  12. ContactInfoComponent
  13. } from './contact-info/contact-info.component';
  14. @Component({
  15. selector: 'app-root',
  16. templateUrl: './app.component.html',
  17. styleUrls: ['./app.component.css']
  18. })
  19. export class AppComponent implements OnInit {
  20. title = 'DynamicComponents';
  21. dynamicCom: any;
  22. ngOnInit() {
  23. this.dynamicCom = HomeComponent;
  24. }
  25. dynamicDash() {
  26. this.dynamicCom = DashboardComponent;
  27. }
  28. dynamicContact() {
  29. this.dynamicCom = ContactInfoComponent;
  30. }
  31. dynamicHome() {
  32. this.dynamicCom = HomeComponent;
  33. }
  34. }
  35. // Root Component html
  36. <div class="container ml-10 mt-2" style="width:100;">
  37. <a class="navbar-brand" href="#">
  38. <img src="assets/c2.jpg" width="1111" height="200">
  39. </a>
  40. <h2 style="text-align:center;text-decoration:dotted;background-color:gainsboro;">Dynamic Entry Components </h2>
  41. <nav class="navbar navbar-expand-lg navbar-white bg-white pt-4">
  42. <button class="btn btn-outline-primary col offset-1" (click)="dynamicHome()" type="submit">Home</button>
  43. <button class="btn btn-outline-primary col offset-1" (click)="dynamicDash()" type="submit">Dashboard</button>
  44. <button class="btn btn-outline-primary col offset-1" (click)="dynamicContact()" type="submit">ContactInfo</button>
  45. </nav>
  46. <div class="pt-5">
  47. <ng-container *ngComponentOutlet="dynamicCom"></ng-container>
  48. </div>
  49. </div>
Open Component to Module and see that the Child components are added:
  1. import {
  2. BrowserModule
  3. } from '@angular/platform-browser';
  4. import {
  5. NgModule
  6. } from '@angular/core';
  7. import {
  8. AppRoutingModule
  9. } from './app-routing.module';
  10. import {
  11. AppComponent
  12. } from './app.component';
  13. import {
  14. DashboardComponent
  15. } from './dashboard/dashboard.component';
  16. import {
  17. HomeComponent
  18. } from './home/home.component';
  19. import {
  20. ContactInfoComponent
  21. } from './contact-info/contact-info.component';
  22. @NgModule({
  23. declarations: [
  24. AppComponent,
  25. DashboardComponent,
  26. HomeComponent,
  27. ContactInfoComponent
  28. ],
  29. entryComponents: [
  30. HomeComponent,
  31. DashboardComponent,
  32. ContactInfoComponent
  33. ], // dynamically added components
  34. imports: [
  35. BrowserModule,
  36. AppRoutingModule
  37. ],
  38. providers: [],
  39. bootstrap: [AppComponent] // bootstrapped entry component
  40. })
  41. 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