[Angular Directive] Create a Template Storage Service in Angular 2

You need to define a

<template>

to be able to use it elsewhere in your app as a

TemplateRef

. You can store these

TemplateRef

s in a Service and then access them from any

@Directive

or

@Component

in your app.

We want to create a service and a component together to store all the templates.

service:

import {Injectable, TemplateRef} from "@angular/core";
@Injectable()
export class TemplatesService {
templates = new Map<string, TemplateRef<any>>();
}

compoment:

import {Component, ViewChild} from "@angular/core";
import {TemplatesService} from "./shared/services/templates.service";
@Component({
selector: 'template-storage',
template: `
<template #header>
<h1>This is header</h1>
</template>
<template #footer>
<h1>This is the footer</h1>
</template>
`
})
export class TemplateStorageComponent {
@ViewChild('header') headerTemplate;
@ViewChild('footer') footerTemplate;
constructor(private service: TemplatesService){

}

ngAfterViewInit() {
this.service.templates.set('header', this.headerTemplate);
this.service.templates.set('footer', this.footerTemplate);
}
}

Here, set templates must to present in 'ngAfterViewInit'.

Directive:

import {Directive, TemplateRef, ViewContainerRef} from "@angular/core";
import {TemplatesService} from "../services/templates.service";
@Directive({
selector: '[surround]'
})
export class SurroundDirective {
constructor(
private template: TemplateRef<any>,
private view: ViewContainerRef,
private service: TemplatesService
){}

ngAfterViewInit(){
this.view.createEmbeddedView(this.service.templates.get('header'));
this.view.createEmbeddedView(this.template);
this.view.createEmbeddedView(this.service.templates.get('footer'));
}
}