To install the module use the following commands:
$ yarn add @pascaliske/dynamic-components
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 {}
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',
+ },
+ },
+ ]
}
- Create a host element for injecting dynamically created components:
<div class="cmp-root">
+ <cmp-dynamic-components [components]="components"></cmp-dynamic-components>
</div>
You can view a quick demo here.
MIT © 2022 Pascal Iske