@pascaliske/dynamic-components v3.0.3

@pascaliske/dynamic-components

Installation

To install the module use the following commands:

$ yarn add @pascaliske/dynamic-components

Usage

1. Import the module in your root module

 import { NgModule } from '@angular/core'
 import { DynamicComponentsModule } from '@pascaliske/dynamic-components'
 import { HeadlinesModule } from './headlines/headlines.module'
 import { HeadlineH1Component } from './headlines/headline-h1/headline-h1.component'
 import { HeadlineH2Component } from './headlines/headline-h2/headline-h2.component'

 @NgModule({
     imports: [
         HeadlinesModule,
+        DynamicComponentsModule,
     ],
 })
export class AppModule {}

2. Define components to be dynamically created

 import { Component } from '@angular/core'
 import { ComponentManifest } from '@pascaliske/dynamic-components'

 @Component({
     selector: 'cmp-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
+    public components: Array<ComponentManifest> = [
+        {
+            importer: () => import('./headlines/headline-h1/headline-h1.component'),
+            componentName: 'cmp-headline-h1',
+            params: {
+                text: 'Headline H1',
+            },
+        },
+        {
+            importer: () => import('./headlines/headline-h2/headline-h2.component'),
+            componentName: 'cmp-headline-h2',
+            params: {
+                text: 'Headline H2',
+            },
+        },
+    ]
 }

3. Create a host element for injecting dynamically created components:

 <div class="cmp-root">
+    <cmp-dynamic-components [components]="components"></cmp-dynamic-components>
 </div>

Demo

You can view a quick demo here.

License

MIT © 2020 Pascal Iske