-
-
+
+
+
+
+
Select a Template
@@ -13,5 +13,5 @@ Select a Template
>{{template.flow_name}}
-
+
diff --git a/src/app/feature/template/template.page.ts b/src/app/feature/template/template.page.ts
index 4bdf70af19..9fa78d0ab0 100644
--- a/src/app/feature/template/template.page.ts
+++ b/src/app/feature/template/template.page.ts
@@ -1,6 +1,8 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { FlowTypes } from "packages/data-models";
+import { TemplateHostDirective } from "src/app/shared/components/template/directives/templateHost.directive";
+import { TemplateService } from "src/app/shared/components/template/services/template.service";
import { AppDataService } from "src/app/shared/services/data/app-data.service";
@Component({
@@ -13,14 +15,27 @@ export class TemplatePage implements OnInit {
filterTerm: string;
allTemplates: FlowTypes.FlowTypeBase[] = [];
filteredTemplates: FlowTypes.FlowTypeBase[] = [];
- constructor(private route: ActivatedRoute, private appDataService: AppDataService) {}
- ngOnInit() {
- this.templateName = this.route.snapshot.params.templateName;
- const allTemplates = this.appDataService.listSheetsByType("template");
+ @ViewChild(TemplateHostDirective, { static: true }) templateHost!: TemplateHostDirective;
+
+ constructor(
+ private route: ActivatedRoute,
+ private appDataService: AppDataService,
+ private templateService: TemplateService
+ ) {}
- this.allTemplates = allTemplates.sort((a, b) => (a.flow_name > b.flow_name ? 1 : -1));
- this.filteredTemplates = allTemplates;
+ ngOnInit() {
+ const templateName = this.route.snapshot.params.templateName;
+ if (templateName) {
+ this.templateName = templateName;
+ this.templateService.injectTemplate(templateName, this.templateHost);
+ }
+ // Display list of all templates if not specified
+ else {
+ const allTemplates = this.appDataService.listSheetsByType("template");
+ this.allTemplates = allTemplates.sort((a, b) => (a.flow_name > b.flow_name ? 1 : -1));
+ this.filteredTemplates = allTemplates;
+ }
}
search() {
diff --git a/src/app/shared/components/template/containers/index.ts b/src/app/shared/components/template/containers/index.ts
new file mode 100644
index 0000000000..99593445d3
--- /dev/null
+++ b/src/app/shared/components/template/containers/index.ts
@@ -0,0 +1,8 @@
+import { TemplateContainerComponent } from "../template-container.component";
+import { TemplateDynamicComponent } from "./template-dynamic/template-dynamic.component";
+
+/** Available template containers to handle template rendering strategy */
+export const TEMLATE_CONTAINERS = {
+ default: TemplateContainerComponent,
+ dynamic: TemplateDynamicComponent,
+} as const;
diff --git a/src/app/shared/components/template/containers/template-dynamic/template-dynamic.component.html b/src/app/shared/components/template/containers/template-dynamic/template-dynamic.component.html
new file mode 100644
index 0000000000..a0b290b4a1
--- /dev/null
+++ b/src/app/shared/components/template/containers/template-dynamic/template-dynamic.component.html
@@ -0,0 +1,4 @@
+
+