Add support for multiple datatable custom html templates (#17)

Author: Matthbo

projects/angular-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frankframework/angular-components",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A collection of reusable components designed for use in Frank!Framework projects",
   "main": "",
   "author": "Vivy Booman",

projects/angular-components/src/lib/datatable/datatable.component.html

@@ -29,16 +29,28 @@
             ><ng-container>{{ element[column.property] }}</ng-container>
           </ng-container>
           <ng-template #htmlBody>
-            <ng-container
-              *ngIf="content; else noTemplate"
-              [ngTemplateOutlet]="content.templateReference"
-              [ngTemplateOutletContext]="{ rowElement: element }"
-            ></ng-container>
-            <ng-template #noTemplate><small>No template with DtContent found in datatable body</small></ng-template>
+            <ng-container *ngIf="contentTemplates.length > 0; else noTemplate">
+              <ng-container
+                *ngIf="contentTemplates.length === 1; else multiTemplates"
+                [ngTemplateOutlet]="contentTemplates[0].template"
+                [ngTemplateOutletContext]="{ rowElement: element }"
+              ></ng-container>
+              <ng-template #multiTemplates>
+                <ng-container
+                  *ngIf="findHtmlTemplate(column.name); else noTemplateWithName"
+                  [ngTemplateOutlet]="findHtmlTemplate(column.name)!.template"
+                  [ngTemplateOutletContext]="{ rowElement: element }"
+                ></ng-container>
+              </ng-template>
+            </ng-container>
           </ng-template>
         </td>
       </ng-container>
     </ng-container>
+    <ng-template #noTemplate><small>No template with DtContent found in datatable body</small></ng-template>
+    <ng-template #noTemplateWithName
+      ><small>No template with DtContent name found in datatable body</small></ng-template
+    >
 
     <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
     <tr cdk-row *cdkRowDef="let row; columns: displayedColumns"></tr>

projects/angular-components/src/lib/datatable/datatable.component.ts

@@ -1,9 +1,9 @@
-import { AfterViewInit, Component, ContentChild, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, ContentChildren, Input, OnDestroy, QueryList, TemplateRef } from '@angular/core';
 import { CdkTableModule, DataSource } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
-import { DtContentDirective } from './dt-content.directive';
+import { DtContentDirective, DtContent } from './dt-content.directive';
 
 export type TableOptions = {
   sizeOptions: number[];
@@ -48,6 +48,11 @@ export type DataTableServerResponseInfo<T> = {
   data: T[];
 };
 
+type ContentTemplate<T> = {
+  template: TemplateRef<DtContent<T>>;
+  name?: string;
+};
+
 @Component({
   selector: 'ff-datatable',
   standalone: true,
@@ -59,7 +64,8 @@ export class DatatableComponent<T> implements AfterViewInit, OnDestroy {
   @Input({ required: true }) public datasource!: DataTableDataSource<T>;
   @Input({ required: true }) public displayColumns: DataTableColumn<T>[] = [];
 
-  @ContentChild(DtContentDirective) protected content?: DtContentDirective<T>;
+  @ContentChildren(DtContentDirective) protected content!: QueryList<DtContentDirective<T>>;
+  protected contentTemplates: ContentTemplate<T>[] = [];
   protected totalFilteredEntries: number = 0;
   protected totalEntries: number = 0;
   protected minPageEntry: number = 0;
@@ -76,6 +82,10 @@ export class DatatableComponent<T> implements AfterViewInit, OnDestroy {
   ngAfterViewInit(): void {
     // needed to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
+      this.contentTemplates = this.content.map((contentItem) => ({
+        name: contentItem.dtContent,
+        template: contentItem.templateReference,
+      }));
       const entriesSubscription = this.datasource.getEntriesInfo().subscribe((entriesInfo) => {
         this.totalEntries = entriesInfo.totalEntries;
         this.totalFilteredEntries = entriesInfo.totalFilteredEntries;
@@ -107,6 +117,10 @@ export class DatatableComponent<T> implements AfterViewInit, OnDestroy {
   updatePage(pageNumber: number): void {
     this.datasource.updatePage(pageNumber);
   }
+
+  protected findHtmlTemplate(templateName: string): ContentTemplate<T> | undefined {
+    return this.contentTemplates.find(({ name }) => name === templateName);
+  }
 }
 
 export class DataTableDataSource<T> extends DataSource<T> {

projects/angular-components/src/lib/datatable/dt-content.directive.ts

@@ -1,13 +1,14 @@
-import { Directive, TemplateRef } from '@angular/core';
+import { Directive, Input, TemplateRef } from '@angular/core';
 
 export interface DtContent<T> {
   rowElement: T;
 }
 
 @Directive({
-  selector: '[appDtContent]',
+  selector: '[dtContent]',
   standalone: true,
 })
 export class DtContentDirective<T> {
   constructor(public templateReference: TemplateRef<DtContent<T>>) {}
+  @Input() dtContent?: string;
 }

src/app/app.component.html

@@ -80,9 +80,10 @@ <h2>Chip</h2>
     <h2>Datatable</h2>
     <div class="components">
       <ff-datatable [datasource]="datasource" [displayColumns]="displayedColumns">
-        <ng-template appDtContent>
+        <ng-template dtContent="actions">
           <span><button>Something</button></span>
         </ng-template>
+        <ng-template dtContent="something"> Something </ng-template>
       </ff-datatable>
     </div>
     <p>Without template:</p>

src/app/app.component.ts

@@ -26,6 +26,7 @@ export class AppComponent implements OnInit {
     { name: 'description', displayName: 'Description', property: 'description' },
     { name: 'genre', displayName: 'Genre', property: 'genre' },
     { name: 'actions', displayName: 'Actions', property: null, html: true },
+    { name: 'something', displayName: 'Something', property: null, html: true },
   ];
 
   constructor() {}