ngx-dynamic-template
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.1 • Public • Published

    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

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

    <ng-template dynamic-template
                 [httpUrl]="'https://httpbin.org/get'"
                 [defaultTemplate]="'<span>on error template</span>'"
                 [remoteTemplateFactory]="remoteTemplateFactory">
    </ng-template>
      import { Component, OnInit } from '@angular/core';
      import { HttpHeaders } from '@angular/common/http';
      import { IDynamicRemoteTemplateFactory, DynamicHttpResponseT, IDynamicHttpRequest } from 'ngx-dynamic-template';
      ...
      remoteTemplateFactoryIDynamicRemoteTemplateFactory = {
        // 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.
    <ng-template dynamic-template
                 [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.
    NgxDynamicTemplateModule.forRoot({ removeDynamicWrapper: true });

    License

    Licensed under MIT.

    Install

    npm i ngx-dynamic-template

    DownloadsWeekly Downloads

    248

    Version

    2.3.1

    License

    MIT

    Last publish

    Collaborators

    • apoterenko