An implementation of dynamic template wrapper at Angular4/5. **AoT mode does not support**, sorry! In case of dynamic component please use ngComponentOutlet.
npm install ngx-dynamic-templatesh
npm install ngx-dynamic-template --save
`
`typescript
import { NgxDynamicTemplateModule } from 'ngx-dynamic-template';
@NgModule({
imports: [NgxDynamicTemplateModule.forRoot()]
})
`
Demo
Live demo
1. Based on angular-cli
2. npm run build -- -prod
3. aot flag must be disabled, aot: false, see angular/cli/models/webpack-config.ts
Local demo
1. Based on angular-cli
2. npm run build -- -prod
3. aot flag must be disabled, aot: false, see angular/cli/models/webpack-config.ts
Local demo #2
1. Based on Angular 2 Webpack Starter
2. npm run build:prod
Features
##### 1 Support of dynamic-template directive.
`html
[template]="'This is simple dynamic template'">
`
##### 2 Support of lazy loaded component modules for the dynamic templates via lazyModules input parameter (demo scenario #4).
`html
[template]="' '"
[lazyModules]="['lazy']">
`
`typescript
export const ROUTES: Routes = [
{ path: '', component: HomeComponent },
...
{ path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' }
];
...
@NgModule({
imports: [
...
NgxDynamicTemplateModule.forRoot({ routes: ROUTES }),
RouterModule.forRoot(ROUTES)
],
`
##### 3 Support of httpUrl attribute. This attribute allows getting resource via Angular2 HTTP/Ajax (demo scenario #3).
Also 301, 302, 307, 308 HTTP statuses are supported (recursive redirection). The remoteTemplateFactory is an optional attribute allows parse response and build http request.
`html
[httpUrl]="'https://httpbin.org/get'"
[defaultTemplate]="'on error template'"
[remoteTemplateFactory]="remoteTemplateFactory">
`
`typescript
import { Component, OnInit } from '@angular/core';
import { HttpHeaders } from '@angular/common/http';
import { IDynamicRemoteTemplateFactory, DynamicHttpResponseT, IDynamicHttpRequest } from 'ngx-dynamic-template';
...
remoteTemplateFactory: IDynamicRemoteTemplateFactory = {
// This is an optional method
buildRequestOptions (): IDynamicHttpRequest {
const headers = new HttpHeaders();
headers.append('Token', '100500');
return {
withCredentials: true,
headers: headers
};
},
// This is an optional method
parseResponse (response: DynamicHttpResponseT): string {
return response.body.headers['User-Agent'];
}
};
`
##### 4 Support for injecting the extra modules via extraModules input parameter.
`html
[template]="template4"
[context]="context4"
[extraModules]="[myExtraModule]">
`
##### 5 Support of caching of compiled modules for the specific dynamic template. Therefore you can render a huge amount of dynamic templates at the same time (demo scenario #5).
##### 6 Support of recursive injection the dynamic module instance (dynamic component inside dynamic component).
##### 7 Clearing dynamic wrapper using the removeDynamicWrapper option.
`typescript
NgxDynamicTemplateModule.forRoot({ removeDynamicWrapper: true });
``