closes #2

interfaces/product.ts

@@ -12,4 +12,5 @@ export interface IProductDefinition {
 export interface IProduct extends IProductDefinition {
   filters: IProductFilter[];
   subproducts: IProductDefinition[];
+  cardTemplate: string;
 }

package.json

@@ -34,6 +34,7 @@
     "@siemens/ngx-datatable": "^22.2.0",
     "compress-json": "^2.1.2",
     "csv-parse": "^5.3.2",
+    "handlebars": "^4.7.8",
     "ionicons": "^6.0.3",
     "lodash": "^4.17.21",
     "luxon": "^3.1.0",

src/app/card/card.page.html

@@ -23,18 +23,26 @@
 
             <ion-card-content>
               <ion-list>
-                <ion-item *ngIf="cardData.text">
+                @if(cardData.text) {
+                <ion-item>
                   <ion-label text-wrap>
-                    <div class="flavortext">
-                      <em>{{ cardData.text }}</em>
+                    <div>
+                      <p>{{ cardData.text }}</p>
                     </div>
+
+                    @if(template) {
+                    <br>
+                    <div [innerHTML]="template"></div>
+                    }
                   </ion-label>
                 </ion-item>
+                }
 
                 <ion-item>
                   <ion-label text-wrap>
-                    <ion-chip *ngFor="let tag of cardData.tags" color="primary" (click)="searchTag(tag)">{{ tag
-                      }}</ion-chip>
+                    @for(tag of cardData.tags; track tag) {
+                    <ion-chip color="primary" (click)="searchTag(tag)">{{ tag }}</ion-chip>
+                    }
                   </ion-label>
                 </ion-item>
               </ion-list>

src/app/card/card.page.ts

@@ -2,6 +2,9 @@ import { Component, inject, type OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { type ICard } from '../../../interfaces';
 import { CardsService } from '../cards.service';
+import { MetaService } from '../meta.service';
+
+import Handlebars from 'handlebars';
 
 @Component({
   selector: 'app-card',
@@ -12,8 +15,10 @@ export class CardPage implements OnInit {
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   private cardsService = inject(CardsService);
+  private metaService = inject(MetaService);
 
   public cardData: ICard | undefined = undefined;
+  public template = '';
 
   ngOnInit() {
     const cardId = this.route.snapshot.paramMap.get('id');
@@ -23,6 +28,12 @@ export class CardPage implements OnInit {
       this.router.navigate(['/']);
       return;
     }
+
+    const template = this.metaService.getTemplateByProductId(
+      this.cardData.product
+    );
+    const compiledTemplate = Handlebars.compile(template);
+    this.template = compiledTemplate(this.cardData);
   }
 
   search(query: string) {

src/app/meta.service.ts

@@ -8,6 +8,7 @@ import { environment } from '../environments/environment';
 })
 export class MetaService {
   private allProducts: IProduct[] = [];
+  private templatesByProductId: Record<string, string> = {};
 
   public get products() {
     return this.allProducts;
@@ -18,5 +19,17 @@ export class MetaService {
     const realData = await metaData.json();
 
     this.allProducts = realData;
+
+    this.loadTemplates();
+  }
+
+  private loadTemplates() {
+    this.allProducts.forEach((product) => {
+      this.templatesByProductId[product.id] = product.cardTemplate;
+    });
+  }
+
+  public getTemplateByProductId(productId: string): string {
+    return this.templatesByProductId[productId];
   }
 }