docs: fix documentation for Angular 6+

l-lin · Jun 2, 2018 · c28b4c6 · c28b4c6
1 parent 7fe9a4e
commit c28b4c6
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 107 deletions.
diff --git a/demo/angular.json b/demo/angular.json
@@ -34,6 +34,7 @@
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
               "node_modules/tether/dist/js/tether.js",
+              "node_modules/materialize-css/dist/js/materialize.js",
               "node_modules/jszip/dist/jszip.js",
               "node_modules/datatables.net/js/jquery.dataTables.js",
               "node_modules/datatables.net-buttons/js/dataTables.buttons.js",

diff --git a/demo/src/app/advanced/rerender-snippet.component.ts b/demo/src/app/advanced/rerender-snippet.component.ts
@@ -27,21 +27,21 @@ export class RerenderSnippetComponent {
 
   tsSnippet = `
 <pre>
-<code class="typescript highlight">import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+<code class="typescript highlight">import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { DataTableDirective } from 'angular-datatables';
 import { Subject } from 'rxjs';
 
 @Component({
   selector: 'app-rerender',
   templateUrl: 'rerender.component.html'
 })
-export class RerenderComponent implements OnInit, AfterViewInit {
+export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
   @ViewChild(DataTableDirective)
   dtElement: DataTableDirective;
 
   dtOptions: DataTables.Settings = {};
 
-  dtTrigger: Subject&lt;any&gt; = new Subject();
+  dtTrigger: Subject<any> = new Subject();
 
   ngOnInit(): void {
     this.dtOptions = {
@@ -63,6 +63,11 @@ export class RerenderComponent implements OnInit, AfterViewInit {
     this.dtTrigger.next();
   }
 
+  ngOnDestroy(): void {
+    // Do not forget to unsubscribe the event
+    this.dtTrigger.unsubscribe();
+  }
+
   rerender(): void {
     this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
       // Destroy the table first
@@ -71,8 +76,7 @@ export class RerenderComponent implements OnInit, AfterViewInit {
       this.dtTrigger.next();
     });
   }
-}
-</code>
+}</code>
 </pre>
   `;
 }
diff --git a/demo/src/app/advanced/rerender.component.ts b/demo/src/app/advanced/rerender.component.ts
@@ -1,12 +1,12 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { DataTableDirective } from 'angular-datatables';
 import { Subject } from 'rxjs';
 
 @Component({
   selector: 'app-rerender',
   templateUrl: 'rerender.component.html'
 })
-export class RerenderComponent implements OnInit, AfterViewInit {
+export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
   @ViewChild(DataTableDirective)
   dtElement: DataTableDirective;
 
@@ -34,6 +34,11 @@ export class RerenderComponent implements OnInit, AfterViewInit {
     this.dtTrigger.next();
   }
 
+  ngOnDestroy(): void {
+    // Do not forget to unsubscribe the event
+    this.dtTrigger.unsubscribe();
+  }
+
   rerender(): void {
     this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
       // Destroy the table first

diff --git a/demo/src/app/basic/angular-way-snippet.component.ts b/demo/src/app/basic/angular-way-snippet.component.ts
@@ -37,28 +37,23 @@ export class AngularWaySnippetComponent {
 
   tsSnippet = `
 <pre>
-<code class="typescript highlight">import { Component, OnInit } from '@angular/core';
+<code class="typescript highlight">import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Http, Response } from '@angular/http';
 import { Subject } from 'rxjs';
+import { Person } from '../person';
 
 import 'rxjs/add/operator/map';
 
-class Person {
-  id: number;
-  firstName: string;
-  lastName: string;
-}
-
 @Component({
   selector: 'app-angular-way',
   templateUrl: 'angular-way.component.html'
 })
-export class AngularWayComponent implements OnInit {
+export class AngularWayComponent implements OnDestroy, OnInit {
   dtOptions: DataTables.Settings = {};
   persons: Person[] = [];
   // We use this trigger because fetching the list of persons can be quite long,
   // thus we ensure the data is fetched before rendering
-  dtTrigger: Subject&lt;any&gt; = new Subject();
+  dtTrigger: Subject<any> = new Subject<any>();
 
   constructor(private http: Http) { }
 
@@ -76,6 +71,11 @@ export class AngularWayComponent implements OnInit {
       });
   }
 
+  ngOnDestroy(): void {
+    // Do not forget to unsubscribe the event
+    this.dtTrigger.unsubscribe();
+  }
+
   private extractData(res: Response) {
     const body = res.json();
     return body.data || {};

diff --git a/demo/src/app/basic/angular-way.component.ts b/demo/src/app/basic/angular-way.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Http, Response } from '@angular/http';
 import { Subject } from 'rxjs';
 import { Person } from '../person';
@@ -9,7 +9,7 @@ import 'rxjs/add/operator/map';
   selector: 'app-angular-way',
   templateUrl: 'angular-way.component.html'
 })
-export class AngularWayComponent implements OnInit {
+export class AngularWayComponent implements OnDestroy, OnInit {
   dtOptions: DataTables.Settings = {};
   persons: Person[] = [];
   // We use this trigger because fetching the list of persons can be quite long,
@@ -32,6 +32,11 @@ export class AngularWayComponent implements OnInit {
       });
   }
 
+  ngOnDestroy(): void {
+    // Do not forget to unsubscribe the event
+    this.dtTrigger.unsubscribe();
+  }
+
   private extractData(res: Response) {
     const body = res.json();
     return body.data || {};

diff --git a/demo/src/app/extensions/buttons-extension-configuration.component.ts b/demo/src/app/extensions/buttons-extension-configuration.component.ts
@@ -12,9 +12,9 @@ import { Component } from '@angular/core';
   <section [innerHTML]="npmInstallSnippet" highlight-js-content=".bash"></section>
 </div>
 <div class="col s12">
-  <h4 id="angular-cli">.angular-cli.json</h4>
+  <h4 id="angular-cli">angular.json</h4>
   <p>Add the dependencies in the scripts and styles attributes:</p>
-  <section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
+  <section [innerHTML]="angularJsonSnippet" highlight-js-content=".json"></section>
   <blockquote>If you want to have the excel export functionnality, then you must import the <code>jszip.js</code> before the <code>buttons.html5.js</code> file.</blockquote>
 </div>
   `
@@ -32,28 +32,28 @@ npm install datatables.net-buttons-dt --save
 npm install @types/datatables.net-buttons --save-dev
 </pre>`;
 
-  angularCliJsonSnippet = `
+  angularJsonSnippet = `
 <pre>
   <code class="json highlight">{
-  "apps": [
-    {
-      ...
-      "styles": [
-          ...
-          "../node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
-      ],
-      "scripts": [
-        ...
-        "../node_modules/jszip/dist/jszip.js",
-        "../node_modules/datatables.net-buttons/js/dataTables.buttons.js",
-        "../node_modules/datatables.net-buttons/js/buttons.colVis.js",
-        "../node_modules/datatables.net-buttons/js/buttons.flash.js",
-        "../node_modules/datatables.net-buttons/js/buttons.html5.js",
-        "../node_modules/datatables.net-buttons/js/buttons.print.js"
-      ],
-      ...
-    }
-  ]
+  "projects": {
+    "your-app-name": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              ...
+              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
+            ],
+            "scripts": [
+              ...
+              "node_modules/jszip/dist/jszip.js",
+              "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
+              "node_modules/datatables.net-buttons/js/buttons.colVis.js",
+              "node_modules/datatables.net-buttons/js/buttons.flash.js",
+              "node_modules/datatables.net-buttons/js/buttons.html5.js",
+              "node_modules/datatables.net-buttons/js/buttons.print.js"
+            ],
+            ...
 }</code>
 </pre>
   `;

diff --git a/demo/src/app/extensions/colreorder-extension-configuration.component.ts b/demo/src/app/extensions/colreorder-extension-configuration.component.ts
@@ -12,9 +12,9 @@ import { Component } from '@angular/core';
   <section [innerHTML]="npmInstallSnippet" highlight-js-content=".bash"></section>
 </div>
 <div class="col s12">
-  <h4 id="angular-cli">.angular-cli.json</h4>
+  <h4 id="angular-cli">angular.json</h4>
   <p>Add the dependencies in the scripts and styles attributes:</p>
-  <section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
+  <section [innerHTML]="angularJsonSnippet" highlight-js-content=".json"></section>
 </div>
   `
 })
@@ -27,23 +27,23 @@ npm install datatables.net-colreorder --save
 npm install datatables.net-colreorder-dt --save
 </pre>`;
 
-  angularCliJsonSnippet = `
+  angularJsonSnippet = `
 <pre>
   <code class="json highlight">{
-  "apps": [
-    {
-      ...
-      "styles": [
-          ...
-          "../node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css",
-      ],
-      "scripts": [
-        ...
-        "../node_modules/datatables.net-colreorder/js/dataTables.colReorder.js"
-      ],
-      ...
-    }
-  ]
+  "projects": {
+    "your-app-name": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              ...
+              "node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css"
+            ],
+            "scripts": [
+              ...
+              "node_modules/datatables.net-colreorder/js/dataTables.colReorder.js"
+            ],
+            ...
 }</code>
 </pre>
   `;

diff --git a/demo/src/app/extensions/responsive-extension-configuration.component.ts b/demo/src/app/extensions/responsive-extension-configuration.component.ts
@@ -12,9 +12,9 @@ import { Component } from '@angular/core';
   <section [innerHTML]="npmInstallSnippet" highlight-js-content=".bash"></section>
 </div>
 <div class="col s12">
-  <h4 id="angular-cli">.angular-cli.json</h4>
+  <h4 id="angular-cli">angular.json</h4>
   <p>Add the dependencies in the scripts and styles attributes:</p>
-  <section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
+  <section [innerHTML]="angularJsonSnippet" highlight-js-content=".json"></section>
 </div>
   `
 })
@@ -27,23 +27,23 @@ npm install datatables.net-responsive --save
 npm install datatables.net-responsive-dt --save
 </pre>`;
 
-  angularCliJsonSnippet = `
+  angularJsonSnippet = `
 <pre>
   <code class="json highlight">{
-  "apps": [
-    {
-      ...
-      "styles": [
-          ...
-          "../node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css",
-      ],
-      "scripts": [
-        ...
-        "../node_modules/datatables.net-responsive/js/dataTables.responsive.js"
-      ],
-      ...
-    }
-  ]
+  "projects": {
+    "your-app-name": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              ...
+              "node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css"
+            ],
+            "scripts": [
+              ...
+              "node_modules/datatables.net-responsive/js/dataTables.responsive.js"
+            ],
+            ...
 }</code>
 </pre>
   `;

diff --git a/demo/src/app/extensions/select-extension-configuration.component.ts b/demo/src/app/extensions/select-extension-configuration.component.ts
@@ -12,9 +12,9 @@ import { Component } from '@angular/core';
   <section [innerHTML]="npmInstallSnippet" highlight-js-content=".bash"></section>
 </div>
 <div class="col s12">
-  <h4 id="angular-cli">.angular-cli.json</h4>
+  <h4 id="angular-cli">angular.json</h4>
   <p>Add the dependencies in the scripts and styles attributes:</p>
-  <section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
+  <section [innerHTML]="angularJsonSnippet" highlight-js-content=".json"></section>
 </div>
   `
 })
@@ -29,23 +29,23 @@ npm install datatables.net-select-dt --save
 npm install @types/datatables.net-select --save-dev
 </pre>`;
 
-  angularCliJsonSnippet = `
+  angularJsonSnippet = `
 <pre>
   <code class="json highlight">{
-  "apps": [
-    {
-      ...
-      "styles": [
-          ...
-          "../node_modules/datatables.net-select-dt/css/select.dataTables.css",
-      ],
-      "scripts": [
-        ...
-        "../node_modules/datatables.net-select/js/dataTables.select.js"
-      ],
-      ...
-    }
-  ]
+  "projects": {
+    "your-app-name": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              ...
+              "node_modules/datatables.net-select-dt/css/select.dataTables.css"
+            ],
+            "scripts": [
+              ...
+              "node_modules/datatables.net-select/js/dataTables.select.js"
+            ],
+            ...
 }</code>
 </pre>
   `;

diff --git a/demo/src/app/getting-started.component.html b/demo/src/app/getting-started.component.html
@@ -35,9 +35,9 @@ <h4>NPM</h4>
       <div class="section">
         <h2 class="header" id="setup">Setup</h2>
         <div class="col s12">
-          <h4 id="angular-cli">.angular-cli.json</h4>
+          <h4 id="angular-cli">angular.json</h4>
           <p>Add the dependencies in the scripts and styles attributes:</p>
-          <section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
+          <section [innerHTML]="angularJsonSnippet" highlight-js-content=".json"></section>
         </div>
         <div class="col s12">
           <h4 id="ng-module">NgModule</h4>