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

2023 Demo app update

Author: l-lin

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">