angular2-dynamic-component

Installation

npm install angular2-dynamic-component --save

Use case #1

<template ngFor let-button [ngForOf]="buttons">
 <ButtonsToolbarPlaceholder [componentType]="button.type" [buttonName]="button.name">
 </ButtonsToolbarPlaceholder>
</template>

export interface ButtonType {
 name:string;
 type:{new ():IButton};
}
@Component({
 selector: 'ButtonsToolbar',
 template: require('./ButtonsToolbar.html'),
 directives: [
 ButtonsToolbarPlaceholder
 ],
})
export class ButtonsToolbar {
 buttons:Array<ButtonType> = [
 {
 name: 'GreenButtonName',
 type: GreenButton
 },
 {
 name: 'RedButtonName',
 type: RedButton
 }
 ];
}

import {DynamicComponent, DynamicComponentMetadata} from 'angular2-dynamic-component';
import {IButton} from './IButton';
import {ButtonType} from './ButtonsToolbar';
class ButtonsToolbarComponent extends DynamicComponentMetadata {
 constructor(public selector:string = 'ButtonsToolbarPlaceholder') {
 super();
 }
}
@Component(new ButtonsToolbarComponent())
export class ButtonsToolbarPlaceholder extends DynamicComponent<IButton> implements IButton {
 @Input() buttonName:string;
 @Input() componentType:{new ():IButton};
 
 protected destroyWrapper:boolean;
 constructor(...) {
 super(element, viewContainer, compiler, reflector, http);
 
 this.destroyWrapper = true; // remove placeholder after, because the component is not reset, and the data are not changed
 }
}

export interface IButton {
 buttonName:string;
}

@Component({
 selector: 'GreenButton',
 template: '<span style="color: green; width: 50px; border: 1px solid black; padding: 6px; margin: 6px;">The first button with name: {{ buttonName }}</span>',
})
export class GreenButton implements IButton {
 @Input() public buttonName:string;
}

@Component({
 selector: 'RedButton',
 template: '<span style="color: red; width: 50px; border: 1px solid black; padding: 6px; margin: 6px;">The second button with name: {{ buttonName }}</span>',
})
export class RedButton implements IButton {
 @Input() public buttonName:string;
}

Use case #2. Using the "componentTemplate" attribute

import {DynamicComponent} from 'angular2-dynamic-component';
@NgModule({
 declarations: [DynamicComponent],
 ...
})
...
@Component(...)
class App {
 private componentTemplate:string = '<input type="text" style="color: green; width: 100px;" [(ngModel)]="model" (ngModelChange)="onChange($event)"/>';
}

<DynamicComponent [componentTemplate]="componentTemplate">
</DynamicComponent>

Use case #3. Using the "componentMetaData" attribute

import {DynamicComponent} from 'angular2-dynamic-component';
@NgModule({
 declarations: [DynamicComponent],
 ...
})
...
@Component(...)
class App {
 public getDynamicMetaData():IComponentMetadata {
 return {
 ...
 };
 }
}

<DynamicComponent [componentMetaData]="getDynamicMetaData()">
</DynamicComponent>

Use case #4. Using the "componentTemplateUrl" attribute

import {DynamicComponent} from 'angular2-dynamic-component';
@NgModule({
 declarations: [DynamicComponent],
 ...
})

<DynamicComponent [componentTemplateUrl]="'http://www.yandex.ru'">
</DynamicComponent>

Publish

npm run deploy

License