Introduction

In this article, we'll learn how to create Component and Dynamic Component Loader in Angular.

Dynamic Component Loader

The Angular application may need to load new components at runtime.
Steps to follow:
Step 1
Create an Angular project setup using the below command or however you want to create it.
ng new projectname
Example,
ng new dynamicloader
Create Dynamic Component Loader In Angular
Step 2
Now, we must generate Component from our Angular cli. Open a new terminal and run the below command.
ng generate component page1
or
ng g c page1
Create Dynamic Component Loader In Angular
Now we are creating multiple components, one as page1 and another one in the next steps.
ng generate component page2
Create Dynamic Component Loader In Angular
Step 3
Now, we can do some code in page1.component
page1.component.ts:
title:any;
page1.component.html:
<p>Component Title {{title}}</p>
This is the same as another component we will see in the below code:
Page2.component.ts:
title:any;
page2.component.html:
<p>Component Title {{title}}</p>
Step 4 - What is ComponentFactoryResolver
A simple registry that maps Components to generated Component Factory classes that can be used to create instances of components. Use to obtain the factory for a given component type, then use the factory's create () method to create a component of that type.
What is ViewContainerRef?
Now, we are inserting new components or templates programmatically, we probably used the ViewContainerRef service.
Now, we can do some code in app.component.ts
  1. import {
  2. Component,
  3. Input,
  4. OnInit,
  5. ViewChild,
  6. ComponentFactoryResolver,
  7. OnDestroy,
  8. ViewContainerRef
  9. } from '@angular/core';
  10. import {
  11. Page1Component
  12. } from './page1/page1.component';
  13. import {
  14. Page2Component
  15. } from './page2/page2.component';
  16. @Component({
  17. selector: 'app-root',
  18. templateUrl: './app.component.html',
  19. styleUrls: ['./app.component.scss']
  20. })
  21. export class AppComponent {
  22. title = 'dynamicloader';
  23. sampleComponents = [
  24. Page1Component, Page2Component
  25. ];
  26. @ViewChild('sample', {
  27. read: ViewContainerRef
  28. }) sample: ViewContainerRef;
  29. constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
  30. ngOnInit() {
  31. this.sample.clear();
  32. let page1ComponentFactory = this.componentFactoryResolver.resolveComponentFactory(this.sampleComponents[0]);
  33. let page1ComponentRef = this.sample.createComponent(page1ComponentFactory);
  34. ( < Page1Component > page1ComponentRef.instance).title = 'Page1';
  35. let page2ComponentFactory = this.componentFactoryResolver.resolveComponentFactory(this.sampleComponents[1]);
  36. let page2ComponentRef = this.sample.createComponent(page2ComponentFactory);
  37. ( < Page2Component > page2ComponentRef.instance).title = 'Page2';
  38. }
  39. }
In this example, we can use the ViewChild decorator to grab any element in our view and read him as ViewContainerRef.
Step 5
Now, we can assign the id in app.component.html
  1. <ng-container #sample></ng-container>
ng-container
ng-container is a directive. It will avoid creating that extra div, we can instead use ng-container directive and it can also provide a placeholder for injecting a template dynamically into the page.
Step 6
Now we check the app.module.ts,
  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. Page1Component
  15. } from './page1/page1.component';
  16. import {
  17. Page2Component
  18. } from './page2/page2.component';
  19. @NgModule({
  20. declarations: [
  21. AppComponent,
  22. Page1Component,
  23. Page2Component
  24. ],
  25. entryComponents: [
  26. Page1Component, Page2Component
  27. ],
  28. imports: [
  29. BrowserModule,
  30. AppRoutingModule
  31. ],
  32. providers: [],
  33. bootstrap: [AppComponent]
  34. })
  35. export class AppModule {}
Step 7
Now, run the application.
npm start