ngx-dynamic-template

An implementation of dynamic template wrapper at Angular4/5. **AoT mode does not support**, sorry! In case of dynamic component please use ngComponentOutlet.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ngx-dynamic-template
2.3.16 years ago6 years agoMinified + gzip package size for ngx-dynamic-template in KB

Popular Searches

Readme

ngx-dynamic-template
An implementation of dynamic template wrapper at Angular4/5. AoT mode does not support, sorry! 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

```sh 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
  1. npm run build -- -prod
  1. aot flag must be disabled, aot: false, see angular/cli/models/webpack-config.ts
Local demo
  1. Based on angular-cli
  1. npm run build -- -prod
  1. aot flag must be disabled, aot: false, see angular/cli/models/webpack-config.ts
Local demo #2
  1. Based on Angular 2 Webpack Starter
  1. npm run build:prod

Features

1 Support of dynamic-template directive.
```html [template]="'<span style=\'color: orange;\'>This is simple dynamic template</span>'"> ```
2 Support of lazy loaded component modules for the dynamic templates via lazyModules input parameter (demo scenario #4).
```html [template]="'<lazy-component></lazy-component>'" 
[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]="'<span>on error template</span>'"
[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]"></ng-template>
```
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 }); ```

License

Licensed under MIT.