Fix exports & datatable error handling (#15)

* Add missing export

* Improve datatable styling

* Test custom html in datatable column

* Add exception handling when datatable has no template given

Author: Matthbo

projects/angular-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frankframework/angular-components",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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

@@ -30,9 +30,11 @@
           </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-template>
         </td>
       </ng-container>

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

@@ -4,6 +4,7 @@
 
 table {
   margin-bottom: 10px;
+  width: 100%;
 }
 
 .dt-options {

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

@@ -59,7 +59,7 @@ 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>;
+  @ContentChild(DtContentDirective) protected content?: DtContentDirective<T>;
   protected totalFilteredEntries: number = 0;
   protected totalEntries: number = 0;
   protected minPageEntry: number = 0;

projects/angular-components/src/lib/library.module.ts

@@ -5,6 +5,8 @@ import { AlertComponent } from './alert/alert.component';
 import { ChipComponent } from './chip/chip.component';
 import { DatatableComponent } from './datatable/datatable.component';
 import { CheckboxComponent } from './checkbox/checkbox.component';
+import { DtContentDirective } from './datatable/dt-content.directive';
+import { ThSortableDirective } from './th-sortable.directive';
 
 const components = [
   ButtonComponent,
@@ -13,6 +15,8 @@ const components = [
   ChipComponent,
   DatatableComponent,
   CheckboxComponent,
+  DtContentDirective,
+  ThSortableDirective,
 ];
 
 @NgModule({

projects/angular-components/src/public_api.ts

@@ -5,8 +5,10 @@ export * from './lib/search/search.component';
 export * from './lib/alert/alert.component';
 export * from './lib/chip/chip.component';
 export * from './lib/datatable/datatable.component';
-export * from './lib/th-sortable.directive';
 export * from './lib/checkbox/checkbox.component';
 
+export * from './lib/th-sortable.directive';
+export * from './lib/datatable/dt-content.directive';
+
 // helper classes
 export * from './lib/icons/icon-base';

src/app/app.component.html

@@ -78,6 +78,14 @@ <h2>Chip</h2>
   </li>
   <li>
     <h2>Datatable</h2>
+    <div class="components">
+      <ff-datatable [datasource]="datasource" [displayColumns]="displayedColumns">
+        <ng-template appDtContent>
+          <span><button>Something</button></span>
+        </ng-template>
+      </ff-datatable>
+    </div>
+    <p>Without template:</p>
     <div class="components">
       <ff-datatable [datasource]="datasource" [displayColumns]="displayedColumns"></ff-datatable>
     </div>

src/app/app.component.ts

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