Have ideas to improve npm?Join in the discussion! »


    1.0.1 • Public • Published


    Extract peices of templates from Angular components declaratively or via service

    Travis CI Coverage Npm Npm Downloads semantic-release Greenkeeper badge


    $ npm install --save ng-original-template


    Import OriginalTemplateModule module in your root module:

    import { OriginalTemplateModule } from 'ng-original-template';
      imports: [OriginalTemplateModule.forRoot()]
    export class AppModule { }

    You can also import this module into your sub-modules if you need to use directive. Just remember to import with forRoot() method only for your root module.

    Declarative usage

    Now in component where you want to get it's template:

    1. Provide component type via provideTemplateFrom() function
    2. In template mark which section of template you want to get and in what property to save it via originalTemplate directive
    import { provideTemplateFrom } from 'ng-original-template';
      selector: 'my-component',
      providers: [provideTemplateFrom(MyComponent)] // <-- #1 Provide type
      template: `<div>`
        + `<h1 originalTemplate="h1">Hello</h1>`    // <-- #2 Mark template piece
        + `<code>{{ h1 }}</code>`                   // <-- You can now simply render this piece of template
      + `</div>`
    class MyComponent {
      h1: string; // <-- Optionally create property where template will be stored to be AOT compatible

    Programmatic usage

    You can also get pieces of template in your code via OriginalTemplateService:

    1. Just mark the piece of template you want with any attribute
    2. Pass component type and attribute regex string to match
    import { OriginalTemplateService } from 'ng-original-template';
      selector: 'my-component',
      template: `<div>`
        + `<h1 h1Marker>Hello</h1>` // <-- #1 Mark template piece
      + `</div>`
    class MyComponent {
      constructor(originalTemplate: OriginalTemplateService) {
        const h1 = originalTemplate.getTemplatePeice(MyComponent, 'h1Marker'); // <-- #2 Get a template string
        // h1 now is a string containing `<h1 h1Marker>Hello</h1>`



    class OriginalTemplateDirective {
      @Input() originalTemplate: string;
      @Input() originalTemplateInner: boolean;
      @Input() originalTemplatePrecise: boolean;

    See src/original-template/original-template.directive.ts for full reference

    Description: Directive to get piece of template declaratively. All calls forwarded to OriginalTemplateService internally. Input originalTemplate is required to tell where to store template in component instance. Input originalTemplateInner is optional to get only inner template (skip the node where this directive was placed). Input originalTemplatePrecise is optional to enable precise mode for getting outer template (slower).


    class OriginalTemplateService {
      static maxPreciseIterations: number;
      getTemplatePeice(component: Type<any>, matchRegexp: string, options?: {
          inner?: boolean;
          precise?: boolean;
      }): string;

    See src/original-template/original-template.service.ts for full reference

    Description: Get a piece of template from component by directive match regexp. By default it will get outer template in not precise mode. If you selecting custom element - it will be the fastest method. For common html tags like div it might be inacurate - so you may want to enable precise mode. If you selecting inner template - precise mode will be used anyway.

    NOTE: matchRegexp argument is used to construct a regexp and is not escaped so you can build flexible matches.


    To generate all *.js, *.js.map, *.d.ts and *.metadata.json files:

    $ npm run build

    To lint all *.ts files:

    $ npm run lint

    To run unit tests:

    $ npm test


    MIT © Alex Malkevich


    npm i ng-original-template

    DownloadsWeekly Downloads






    Last publish


    • avatar