You need to define a <template> to be able to use it elsewhere in your app as a TemplateRef. You can store these TemplateRefs 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'));
}
}