Meligy / ngx-dynamic-template

An implementation of dynamic template wrapper at Angular2/4

ngx-dynamic-template

An implementation of dynamic template wrapper at Angular2/4 [4.1.3] (AoT compatible).
In case of dynamic component please use ngComponentOutlet.

Description

Date of creation: 18 Jun 2016 [started with Angular 2.0.0-rc.2].
The previous version of this module is tandem angular2-dynamic-component and ts-metadata-helper. The last source code version of the angular2-dynamic-component you can see here.

Installation

npm install ngx-dynamic-template --save

```typescript
import { NgxDynamicTemplateModule } from 'ngx-dynamic-template';

@NgModule({
    imports: [NgxDynamicTemplateModule.forRoot()]
})

Demo

Live demo
Local demo

Features

1 Support of dynamicComponentReady & dynamicComponentBeforeReady output events.

2 Support of dynamic-template directive.

3 Support of Dynamic within Dynamic strategy.

@Component(...)
export class AppComponent {
	extraTemplate = `<template dynamic-template [componentTemplate]='"<span>Dynamic inside dynamic!</span>"'></template>`;
	extraModules = [DynamicComponentModule];
	...
}

<template dynamic-template
          [componentModules]="extraModules"
          [componentTemplate]='extraTemplate'></template>

5 Support of componentTemplateUrl attribute. This attribute allows getting resource via Angular2 HTTP/Ajax.

Also, 301, 302, 307, 308 HTTP statuses are supported (recursive redirection). The componentRemoteTemplateFactory (IComponentRemoteTemplateFactory) attribute allows prepare http response before rendering.

@Component(...)
export class AppComponent {
	dynamicCallback(scope) {
		console.log('Hi there! Context value is:', scope.contextValue); // Hi there! Context value is: 100500
	}
}

<template dynamic-template
          (dynamicComponentReady)="dynamicCallback($event)"
          [componentContext]="{contextValue: 100500}"
          [componentDefaultTemplate]='"<span style=\"color: red\">This is fallback template</span>"'
          [componentTemplateUrl]='"https://test-cors.appspot.com"'></template>

6 Support of componentContext attribute.

This attribute can refer to owner component (via self = this) or any other object.

@Component(...)
export class AppComponent {
	self = this;
	dynamicContextValue = 100500;
	changedValue = 0;
	dynamicExtraModules = [FormsModule];
}

<template dynamic-template
          [componentContext]="self"
          [componentModules]="dynamicExtraModules"
          [componentTemplate]='"<span [innerHTML]=\"changedValue\"></span><input type=\"text\" [(ngModel)]=\"dynamicContextValue\" (ngModelChange)=\"changedValue = $event\">"'></template>

7 Support of componentModules attribute.

@Component(...)
export class AppComponent {
	dynamicExtraModules = [FormsModule];
}

<template dynamic-template
          [componentModules]="dynamicExtraModules"
          [componentContext]="{dynamicContextValue: 100500, changedValue: 0}"
          [componentTemplate]='"<span [innerHTML]=\"changedValue\"></span><input type=\"text\" [(ngModel)]=\"dynamicContextValue\" (ngModelChange)=\"changedValue = $event\">"'></template>

8 Support of componentTemplatePath attribute. This analogue of templateUrl parameter for @Component.

License

Licensed under MIT.