Merge pull request #1703 from l-lin/2023-plans

2023 Demo app update

demo/src/app/advanced/demo-ng-template-ref.component.html

@@ -1,3 +1,3 @@
 <div class="btn-group d-block text-center">
-  <button class="btn btn-sm btn-dark" (click)="onAction1()">Action 1</button>
+  <button class="btn btn-sm btn-dark" (click)="onAction1()">{{actionText}}</button>
 </div>

demo/src/app/advanced/demo-ng-template-ref.component.ts

@@ -16,6 +16,9 @@ export class DemoNgComponent implements OnInit {
   @Input()
   data = {};
 
+  @Input()
+  actionText = 'Action 1';
+
   ngOnInit(): void {
   }
 

demo/src/app/advanced/dt-instance.component.spec.ts

@@ -46,9 +46,9 @@ describe('DtInstanceComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it('should have title "Getting the DataTable instance"', waitForAsync(() => {
+  it('should have title "Finding DataTable instance"', waitForAsync(() => {
     const app = fixture.debugElement.componentInstance as DtInstanceComponent;
-    expect(app.pageTitle).toBe('Getting the DataTable instance');
+    expect(app.pageTitle).toBe('Finding DataTable instance');
   }));
 
   it('should retrieve Table instance', async () => {

demo/src/app/advanced/dt-instance.component.ts

@@ -8,7 +8,7 @@ import { DataTableDirective } from 'angular-datatables';
 })
 export class DtInstanceComponent implements OnInit {
 
-  pageTitle = 'Getting the DataTable instance';
+  pageTitle = 'Finding DataTable instance';
   mdIntro = 'assets/docs/advanced/dt-instance/intro.md';
   mdHTML = 'assets/docs/advanced/dt-instance/source-html.md';
   mdTS = 'assets/docs/advanced/dt-instance/source-ts.md';

demo/src/app/advanced/load-dt-options-with-promise.component.spec.ts

@@ -46,9 +46,9 @@ describe('LoadDtOptionsWithPromiseComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it('should have title "Load DataTables Options with Promise"', waitForAsync(() => {
+  it('should have title "Load DT Options with Promise"', waitForAsync(() => {
     const app = fixture.debugElement.componentInstance as LoadDtOptionsWithPromiseComponent;
-    expect(app.pageTitle).toBe('Load DataTables Options with Promise');
+    expect(app.pageTitle).toBe('Load DT Options with Promise');
   }));
 
   it('should render table from dtOptions as a Promise', async () => {

demo/src/app/advanced/load-dt-options-with-promise.component.ts

@@ -7,7 +7,7 @@ import { HttpClient } from '@angular/common/http';
 })
 export class LoadDtOptionsWithPromiseComponent implements OnInit {
 
-  pageTitle = 'Load DataTables Options with Promise';
+  pageTitle = 'Load DT Options with Promise';
   mdIntro = 'assets/docs/advanced/load-dt-opt-with-promise/intro.md';
   mdHTML = 'assets/docs/advanced/load-dt-opt-with-promise/source-html.md';
   mdTS = 'assets/docs/advanced/load-dt-opt-with-promise/source-ts.md';

demo/src/app/advanced/multiple-tables.component.html

@@ -4,7 +4,10 @@
       Display the DataTable instances in the console
     </button>
   </p>
+
+  <h5 class="header">Table 1</h5>
   <table id="first-table" datatable [dtOptions]="dtOptions[0]" class="row-border hover"></table>
+  <h5 class="header">Table 2</h5>
   <table id="second-table" datatable [dtOptions]="dtOptions[1]" class="row-border hover"></table>
 
 </ng-template>

demo/src/app/advanced/multiple-tables.component.spec.ts

@@ -46,9 +46,9 @@ describe('MultipleTablesComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it('should have title "Multiple DataTables in the same page"', waitForAsync(() => {
+  it('should have title "Multiple tables in the same page"', waitForAsync(() => {
     const app = fixture.debugElement.componentInstance as MultipleTablesComponent;
-    expect(app.pageTitle).toBe('Multiple DataTables in the same page');
+    expect(app.pageTitle).toBe('Multiple tables in the same page');
   }));
 
   it('should have two table instances in dtElements', async () => {

demo/src/app/advanced/multiple-tables.component.ts

@@ -7,7 +7,7 @@ import { DataTableDirective } from 'angular-datatables';
 })
 export class MultipleTablesComponent implements OnInit {
 
-  pageTitle = 'Multiple DataTables in the same page';
+  pageTitle = 'Multiple tables in the same page';
   mdIntro = 'assets/docs/advanced/multiple-tables/intro.md';
   mdHTML = 'assets/docs/advanced/multiple-tables/source-html.md';
   mdTS = 'assets/docs/advanced/multiple-tables/source-ts.md';

demo/src/app/advanced/router-link.component.html

@@ -1,6 +1,11 @@
 <ng-template #preview>
-  <table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
+  <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover"></table>
 </ng-template>
+
+<ng-template #demoNg let-data="adtData" let-emitter="captureEvents">
+  <app-demo-ng-template-ref [data]="data" actionText="View" (emitter)="emitter($event)"></app-demo-ng-template-ref>
+</ng-template>
+
 <app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdHTML]="mdHTML"
  [mdTS]="mdTS" [mdTSHeading]="mdTSHeading" [mdTSHigh]="mdTSHigh" [mdTSHighHeading]="mdTSHighHeading"
   [template]="preview">

demo/src/app/advanced/router-link.component.spec.ts

@@ -9,6 +9,8 @@ import { AppRoutingModule } from '../app.routing';
 import { FormsModule } from '@angular/forms';
 import { RouterLinkComponent } from './router-link.component';
 import { Router } from '@angular/router';
+import { By } from '@angular/platform-browser';
+import { DemoNgComponent } from './demo-ng-template-ref.component';
 
 
 let fixture: ComponentFixture<RouterLinkComponent>, component: RouterLinkComponent = null, router: Router = null;
@@ -18,6 +20,7 @@ describe('RouterLinkComponent', () => {
     fixture = TestBed.configureTestingModule({
       declarations: [
         BaseDemoComponent,
+        DemoNgComponent,
         RouterLinkComponent,
         DataTableDirective
       ],
@@ -52,19 +55,20 @@ describe('RouterLinkComponent', () => {
     expect(app.pageTitle).toBe('Router Link');
   }));
 
-  it('should open Person info on click', async () => {
+  it('should respond to button click event inside TemplateRef', async () => {
     await fixture.whenStable();
 
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+
     const rSpy = spyOn(router, 'navigate');
 
-    const button = document.createElement('button');
-    button.setAttribute('view-person-id', '3');
-    fixture.nativeElement.appendChild(button);
+    const row: HTMLTableRowElement = fixture.nativeElement.querySelector('tbody tr:first-child');
+    const button: HTMLButtonElement = row.querySelector('button.btn-sm');
     button.click();
 
-
-    fixture.detectChanges();
-    expect(rSpy).toHaveBeenCalledWith(["/person/3"]);
+    expect(rSpy).toHaveBeenCalled();
   });
 
 });

demo/src/app/advanced/router-link.component.ts

@@ -1,11 +1,15 @@
-import { AfterViewInit, Component, OnInit, Renderer2 } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
+import { ADTSettings } from 'angular-datatables/src/models/settings';
+import { Subject } from 'rxjs';
+import { IDemoNgComponentEventType } from './demo-ng-template-ref-event-type';
+import { DemoNgComponent } from './demo-ng-template-ref.component';
 
 @Component({
   selector: 'app-router-link',
   templateUrl: 'router-link.component.html'
 })
-export class RouterLinkComponent implements AfterViewInit, OnInit {
+export class RouterLinkComponent implements AfterViewInit, OnInit, OnDestroy {
 
   pageTitle = 'Router Link';
   mdIntro = 'assets/docs/advanced/router-link/intro.md';
@@ -15,36 +19,59 @@ export class RouterLinkComponent implements AfterViewInit, OnInit {
   mdTSHeading = 'TypeScript (Angular v9 and below)';
   mdTSHighHeading = 'TypeScript (Angular v10 and above)';
 
-  dtOptions: DataTables.Settings = {};
+  dtOptions: ADTSettings = {};
+  dtTrigger = new Subject<ADTSettings>();
 
-  constructor(private renderer: Renderer2, private router: Router) { }
+  @ViewChild('demoNg') demoNg: TemplateRef<DemoNgComponent>;
+
+  constructor(
+    private router: Router
+  ) { }
 
   ngOnInit(): void {
+  }
+
+  ngAfterViewInit() {
+    const self = this;
+    // init here as we use ViewChild ref
     this.dtOptions = {
       ajax: 'data/data.json',
-      columns: [{
-        title: 'ID',
-        data: 'id'
-      }, {
-        title: 'First name',
-        data: 'firstName'
-      }, {
-        title: 'Last name',
-        data: 'lastName'
-      }, {
-        title: 'Action',
-        render: function (data: any, type: any, full: any) {
-          return '<button class="waves-effect btn" view-person-id="' + full.id + '">View</button>';
+      columns: [
+        {
+          title: 'ID',
+          data: 'id'
+        }, {
+          title: 'First name',
+          data: 'firstName'
+        }, {
+          title: 'Last name',
+          data: 'lastName'
+        },
+        {
+          title: 'Action',
+          defaultContent: '',
+          ngTemplateRef: {
+            ref: this.demoNg,
+            context: {
+              // needed for capturing events inside <ng-template>
+              captureEvents: self.onCaptureEvent.bind(self)
+            }
+          }
         }
-      }]
+      ]
     };
+
+    // race condition fails unit tests if dtOptions isn't sent with dtTrigger
+    setTimeout(() => {
+      this.dtTrigger.next(this.dtOptions);
+    }, 200);
+  }
+
+  onCaptureEvent(event: IDemoNgComponentEventType) {
+    this.router.navigate(["/person/" + event.data.id]);
   }
 
-  ngAfterViewInit(): void {
-    this.renderer.listen('document', 'click', (event) => {
-      if (event.target.hasAttribute("view-person-id")) {
-        this.router.navigate(["/person/" + event.target.getAttribute("view-person-id")]);
-      }
-    });
+  ngOnDestroy(): void {
+    this.dtTrigger?.unsubscribe();
   }
 }

demo/src/app/app.component.css

@@ -34,8 +34,8 @@ ul.side-nav.fixed ul.collapsible-accordion .collapsible-body li a {
 }
 
 .side-nav .logo a {
-  height: 140px;
-  background-color: #66ceff;
+  height: 120px !important;
+  background-color: #2196f3;
   color: #fff;
 }