NgDynamicComponentLoader

A simple service that will dynamically add a component to the DOM at run time. Depending on the location provided, you can attach a component to a ViewContainer, an HTML element, or the root of the application. This makes it very easy to add components such as notifications, alerts or modals anywhere in the DOM.

Install

npm i --save ng-dynamic-component-loader

Usage

For dynamic components, they need to be added to the entryComponents of your module that they will be used in.

1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3
4import { AppComponent } from './app.component';
5import { DynamicComponentComponent } from './dynamic-component/dynamic-component.component';
6
7@NgModule({
8  declarations: [
9    AppComponent,
10    DynamicComponentComponent
11  ],
12  entryComponents: [DynamicComponentComponent],
13  imports: [
14    BrowserModule
15  ],
16  providers: [],
17  bootstrap: [AppComponent]
18})
19export class AppModule { }
20

Then in your parent component

1import { Component } from '@angular/core';
2
3import { NgDynamicComponentLoader } from 'ng-dynamic-component-loader';
4import { DynamicComponentComponent } from './dynamic-component/dynamic-component.component';
5
6@Component({
7  selector: 'app-root',
8  template: `
9    <button (click)="addComponent()">Add Dynamic Component</button>
10  `,
11  styleUrls: ['./app.component.css']
12})
13export class AppComponent {
14  constructor(private loader: NgDynamicComponentLoader) {}
15
16  addComponent() {
17    // if no location is passed, then the component will be 
18    // attached to the root element of the application
19    this.loader.attachComponent(DynamicComponentComponent)
20  }
21}
22

API

1public attachComponent(component: any, location?: HTMLElement|ViewContainerRef): ComponentRef<any>