Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit c28b4c6

Browse files
l-linl-lin
committed
docs: fix documentation for Angular 6+
1 parent 7fe9a4e commit c28b4c6

11 files changed

+122
-107
lines changed

‎demo/angular.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"scripts": [
3535
"node_modules/jquery/dist/jquery.js",
3636
"node_modules/tether/dist/js/tether.js",
37+
"node_modules/materialize-css/dist/js/materialize.js",
3738
"node_modules/jszip/dist/jszip.js",
3839
"node_modules/datatables.net/js/jquery.dataTables.js",
3940
"node_modules/datatables.net-buttons/js/dataTables.buttons.js",

‎demo/src/app/advanced/rerender-snippet.component.ts

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,21 @@ export class RerenderSnippetComponent {
2727

2828
tsSnippet = `
2929
<pre>
30-
<code class="typescript highlight">import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
30+
<code class="typescript highlight">import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
3131
import { DataTableDirective } from 'angular-datatables';
3232
import { Subject } from 'rxjs';
3333
3434
@Component({
3535
selector: 'app-rerender',
3636
templateUrl: 'rerender.component.html'
3737
})
38-
export class RerenderComponent implements OnInit, AfterViewInit {
38+
export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
3939
@ViewChild(DataTableDirective)
4040
dtElement: DataTableDirective;
4141
4242
dtOptions: DataTables.Settings = {};
4343
44-
dtTrigger: Subject&lt;any&gt; = new Subject();
44+
dtTrigger: Subject<any> = new Subject();
4545
4646
ngOnInit(): void {
4747
this.dtOptions = {
@@ -63,6 +63,11 @@ export class RerenderComponent implements OnInit, AfterViewInit {
6363
this.dtTrigger.next();
6464
}
6565
66+
ngOnDestroy(): void {
67+
// Do not forget to unsubscribe the event
68+
this.dtTrigger.unsubscribe();
69+
}
70+
6671
rerender(): void {
6772
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
6873
// Destroy the table first
@@ -71,8 +76,7 @@ export class RerenderComponent implements OnInit, AfterViewInit {
7176
this.dtTrigger.next();
7277
});
7378
}
74-
}
75-
</code>
79+
}</code>
7680
</pre>
7781
`;
7882
}

‎demo/src/app/advanced/rerender.component.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
1+
import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
22
import { DataTableDirective } from 'angular-datatables';
33
import { Subject } from 'rxjs';
44

55
@Component({
66
selector: 'app-rerender',
77
templateUrl: 'rerender.component.html'
88
})
9-
export class RerenderComponent implements OnInit, AfterViewInit {
9+
export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
1010
@ViewChild(DataTableDirective)
1111
dtElement: DataTableDirective;
1212

@@ -34,6 +34,11 @@ export class RerenderComponent implements OnInit, AfterViewInit {
3434
this.dtTrigger.next();
3535
}
3636

37+
ngOnDestroy(): void {
38+
// Do not forget to unsubscribe the event
39+
this.dtTrigger.unsubscribe();
40+
}
41+
3742
rerender(): void {
3843
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
3944
// Destroy the table first

‎demo/src/app/basic/angular-way-snippet.component.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,28 +37,23 @@ export class AngularWaySnippetComponent {
3737

3838
tsSnippet = `
3939
<pre>
40-
<code class="typescript highlight">import { Component, OnInit } from '@angular/core';
40+
<code class="typescript highlight">import { Component, OnDestroy, OnInit } from '@angular/core';
4141
import { Http, Response } from '@angular/http';
4242
import { Subject } from 'rxjs';
43+
import { Person } from '../person';
4344
4445
import 'rxjs/add/operator/map';
4546
46-
class Person {
47-
id: number;
48-
firstName: string;
49-
lastName: string;
50-
}
51-
5247
@Component({
5348
selector: 'app-angular-way',
5449
templateUrl: 'angular-way.component.html'
5550
})
56-
export class AngularWayComponent implements OnInit {
51+
export class AngularWayComponent implements OnDestroy, OnInit {
5752
dtOptions: DataTables.Settings = {};
5853
persons: Person[] = [];
5954
// We use this trigger because fetching the list of persons can be quite long,
6055
// thus we ensure the data is fetched before rendering
61-
dtTrigger: Subject&lt;any&gt; = new Subject();
56+
dtTrigger: Subject<any> = new Subject<any>();
6257
6358
constructor(private http: Http) { }
6459
@@ -76,6 +71,11 @@ export class AngularWayComponent implements OnInit {
7671
});
7772
}
7873
74+
ngOnDestroy(): void {
75+
// Do not forget to unsubscribe the event
76+
this.dtTrigger.unsubscribe();
77+
}
78+
7979
private extractData(res: Response) {
8080
const body = res.json();
8181
return body.data || {};

‎demo/src/app/basic/angular-way.component.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnDestroy, OnInit } from '@angular/core';
22
import { Http, Response } from '@angular/http';
33
import { Subject } from 'rxjs';
44
import { Person } from '../person';
@@ -9,7 +9,7 @@ import 'rxjs/add/operator/map';
99
selector: 'app-angular-way',
1010
templateUrl: 'angular-way.component.html'
1111
})
12-
export class AngularWayComponent implements OnInit {
12+
export class AngularWayComponent implements OnDestroy, OnInit {
1313
dtOptions: DataTables.Settings = {};
1414
persons: Person[] = [];
1515
// We use this trigger because fetching the list of persons can be quite long,
@@ -32,6 +32,11 @@ export class AngularWayComponent implements OnInit {
3232
});
3333
}
3434

35+
ngOnDestroy(): void {
36+
// Do not forget to unsubscribe the event
37+
this.dtTrigger.unsubscribe();
38+
}
39+
3540
private extractData(res: Response) {
3641
const body = res.json();
3742
return body.data || {};

‎demo/src/app/extensions/buttons-extension-configuration.component.ts

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import { Component } from '@angular/core';
1212
<section [innerHTML]="npmInstallSnippet" highlight-js-content=".bash"></section>
1313
</div>
1414
<div class="col s12">
15-
<h4 id="angular-cli">.angular-cli.json</h4>
15+
<h4 id="angular-cli">angular.json</h4>
1616
<p>Add the dependencies in the scripts and styles attributes:</p>
17-
<section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
17+
<section [innerHTML]="angularJsonSnippet" highlight-js-content=".json"></section>
1818
<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>
1919
</div>
2020
`
@@ -32,28 +32,28 @@ npm install datatables.net-buttons-dt --save
3232
npm install @types/datatables.net-buttons --save-dev
3333
</pre>`;
3434

35-
angularCliJsonSnippet = `
35+
angularJsonSnippet = `
3636
<pre>
3737
<code class="json highlight">{
38-
"apps": [
39-
{
40-
...
41-
"styles": [
42-
...
43-
"../node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
44-
],
45-
"scripts": [
46-
...
47-
"../node_modules/jszip/dist/jszip.js",
48-
"../node_modules/datatables.net-buttons/js/dataTables.buttons.js",
49-
"../node_modules/datatables.net-buttons/js/buttons.colVis.js",
50-
"../node_modules/datatables.net-buttons/js/buttons.flash.js",
51-
"../node_modules/datatables.net-buttons/js/buttons.html5.js",
52-
"../node_modules/datatables.net-buttons/js/buttons.print.js"
53-
],
54-
...
55-
}
56-
]
38+
"projects": {
39+
"your-app-name": {
40+
"architect": {
41+
"build": {
42+
"options": {
43+
"styles": [
44+
...
45+
"node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
46+
],
47+
"scripts": [
48+
...
49+
"node_modules/jszip/dist/jszip.js",
50+
"node_modules/datatables.net-buttons/js/dataTables.buttons.js",
51+
"node_modules/datatables.net-buttons/js/buttons.colVis.js",
52+
"node_modules/datatables.net-buttons/js/buttons.flash.js",
53+
"node_modules/datatables.net-buttons/js/buttons.html5.js",
54+
"node_modules/datatables.net-buttons/js/buttons.print.js"
55+
],
56+
...
5757
}</code>
5858
</pre>
5959
`;

‎demo/src/app/extensions/colreorder-extension-configuration.component.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import { Component } from '@angular/core';
1212
<section [innerHTML]="npmInstallSnippet" highlight-js-content=".bash"></section>
1313
</div>
1414
<div class="col s12">
15-
<h4 id="angular-cli">.angular-cli.json</h4>
15+
<h4 id="angular-cli">angular.json</h4>
1616
<p>Add the dependencies in the scripts and styles attributes:</p>
17-
<section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
17+
<section [innerHTML]="angularJsonSnippet" highlight-js-content=".json"></section>
1818
</div>
1919
`
2020
})
@@ -27,23 +27,23 @@ npm install datatables.net-colreorder --save
2727
npm install datatables.net-colreorder-dt --save
2828
</pre>`;
2929

30-
angularCliJsonSnippet = `
30+
angularJsonSnippet = `
3131
<pre>
3232
<code class="json highlight">{
33-
"apps": [
34-
{
35-
...
36-
"styles": [
37-
...
38-
"../node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css",
39-
],
40-
"scripts": [
41-
...
42-
"../node_modules/datatables.net-colreorder/js/dataTables.colReorder.js"
43-
],
44-
...
45-
}
46-
]
33+
"projects": {
34+
"your-app-name": {
35+
"architect": {
36+
"build": {
37+
"options": {
38+
"styles": [
39+
...
40+
"node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css"
41+
],
42+
"scripts": [
43+
...
44+
"node_modules/datatables.net-colreorder/js/dataTables.colReorder.js"
45+
],
46+
...
4747
}</code>
4848
</pre>
4949
`;

‎demo/src/app/extensions/responsive-extension-configuration.component.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import { Component } from '@angular/core';
1212
<section [innerHTML]="npmInstallSnippet" highlight-js-content=".bash"></section>
1313
</div>
1414
<div class="col s12">
15-
<h4 id="angular-cli">.angular-cli.json</h4>
15+
<h4 id="angular-cli">angular.json</h4>
1616
<p>Add the dependencies in the scripts and styles attributes:</p>
17-
<section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
17+
<section [innerHTML]="angularJsonSnippet" highlight-js-content=".json"></section>
1818
</div>
1919
`
2020
})
@@ -27,23 +27,23 @@ npm install datatables.net-responsive --save
2727
npm install datatables.net-responsive-dt --save
2828
</pre>`;
2929

30-
angularCliJsonSnippet = `
30+
angularJsonSnippet = `
3131
<pre>
3232
<code class="json highlight">{
33-
"apps": [
34-
{
35-
...
36-
"styles": [
37-
...
38-
"../node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css",
39-
],
40-
"scripts": [
41-
...
42-
"../node_modules/datatables.net-responsive/js/dataTables.responsive.js"
43-
],
44-
...
45-
}
46-
]
33+
"projects": {
34+
"your-app-name": {
35+
"architect": {
36+
"build": {
37+
"options": {
38+
"styles": [
39+
...
40+
"node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css"
41+
],
42+
"scripts": [
43+
...
44+
"node_modules/datatables.net-responsive/js/dataTables.responsive.js"
45+
],
46+
...
4747
}</code>
4848
</pre>
4949
`;

‎demo/src/app/extensions/select-extension-configuration.component.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import { Component } from '@angular/core';
1212
<section [innerHTML]="npmInstallSnippet" highlight-js-content=".bash"></section>
1313
</div>
1414
<div class="col s12">
15-
<h4 id="angular-cli">.angular-cli.json</h4>
15+
<h4 id="angular-cli">angular.json</h4>
1616
<p>Add the dependencies in the scripts and styles attributes:</p>
17-
<section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
17+
<section [innerHTML]="angularJsonSnippet" highlight-js-content=".json"></section>
1818
</div>
1919
`
2020
})
@@ -29,23 +29,23 @@ npm install datatables.net-select-dt --save
2929
npm install @types/datatables.net-select --save-dev
3030
</pre>`;
3131

32-
angularCliJsonSnippet = `
32+
angularJsonSnippet = `
3333
<pre>
3434
<code class="json highlight">{
35-
"apps": [
36-
{
37-
...
38-
"styles": [
39-
...
40-
"../node_modules/datatables.net-select-dt/css/select.dataTables.css",
41-
],
42-
"scripts": [
43-
...
44-
"../node_modules/datatables.net-select/js/dataTables.select.js"
45-
],
46-
...
47-
}
48-
]
35+
"projects": {
36+
"your-app-name": {
37+
"architect": {
38+
"build": {
39+
"options": {
40+
"styles": [
41+
...
42+
"node_modules/datatables.net-select-dt/css/select.dataTables.css"
43+
],
44+
"scripts": [
45+
...
46+
"node_modules/datatables.net-select/js/dataTables.select.js"
47+
],
48+
...
4949
}</code>
5050
</pre>
5151
`;

‎demo/src/app/getting-started.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ <h4>NPM</h4>
3535
<div class="section">
3636
<h2 class="header" id="setup">Setup</h2>
3737
<div class="col s12">
38-
<h4 id="angular-cli">.angular-cli.json</h4>
38+
<h4 id="angular-cli">angular.json</h4>
3939
<p>Add the dependencies in the scripts and styles attributes:</p>
40-
<section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
40+
<section [innerHTML]="angularJsonSnippet" highlight-js-content=".json"></section>
4141
</div>
4242
<div class="col s12">
4343
<h4 id="ng-module">NgModule</h4>

0 commit comments

Comments
 (0)