ng-original-template

Extract peices of templates from Angular components declaratively or via service

Installation

$ npm install --save ng-original-template

Usage

Import OriginalTemplateModule module in your root module:

import { OriginalTemplateModule } from 'ng-original-template';
 
@NgModule({
  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';
 
@Component({
  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';
 
@Component({
  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>`
  }
}

Documentation

OriginalTemplateDirective

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).

OriginalTemplateService

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.

Development

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

License

MIT © Alex Malkevich