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

Commit 8842fac

Browse files
l-linl-lin
committed
doc: add example with routerLink #979 
1 parent 2d64a3b commit 8842fac

14 files changed

+241
-16
lines changed

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-router-link-snippet',
5+
template: `
6+
<div id="html" class="col s12 m9 l12">
7+
<h4 class="header">HTML</h4>
8+
<section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
9+
</div>
10+
<div id="ts" class="col s12 m9 l12">
11+
<h4 class="header">Typescript</h4>
12+
<section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
13+
</div>
14+
`
15+
})
16+
export class RouterLinkSnippetComponent {
17+
htmlSnippet = `
18+
<pre>
19+
<code class="xml highlight">
20+
&lt;table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover"&gt;&lt;/table&gt;</code>
21+
</pre>
22+
`;
23+
24+
tsSnippet = `
25+
<pre>
26+
<code class="typescript highlight">import { AfterViewInit, Component, OnInit, Renderer } from '@angular/core';
27+
import { Router } from '@angular/router';
28+
29+
@Component({
30+
selector: 'app-router-link',
31+
templateUrl: 'router-link.component.html'
32+
})
33+
export class RouterLinkComponent implements AfterViewInit, OnInit {
34+
dtOptions: DataTables.Settings = {};
35+
36+
constructor(private renderer: Renderer, private router: Router) { }
37+
38+
ngOnInit(): void {
39+
this.dtOptions = {
40+
ajax: 'data/data.json',
41+
columns: [{
42+
title: 'ID',
43+
data: 'id'
44+
}, {
45+
title: 'First name',
46+
data: 'firstName'
47+
}, {
48+
title: 'Last name',
49+
data: 'lastName'
50+
}, {
51+
title: 'Action',
52+
render: function (data: any, type: any, full: any) {
53+
return '<button class="waves-effect btn" view-person-id="' + full.id + '">View</button>';
54+
}
55+
}]
56+
};
57+
}
58+
59+
ngAfterViewInit(): void {
60+
this.renderer.listenGlobal('document', 'click', (event) => {
61+
if (event.target.hasAttribute("view-person-id")) {
62+
this.router.navigate(["/person/" + event.target.getAttribute("view-person-id")]);
63+
}
64+
});
65+
}
66+
}</code>
67+
</pre>
68+
`;
69+
}

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<div class="section banner">
2+
<div class="container">
3+
<div class="row">
4+
<div class="col s12 m9">
5+
<h1 class="header center-on-small-only">Router link</h1>
6+
</div>
7+
</div>
8+
</div>
9+
</div>
10+
<div class="container">
11+
<div class="row">
12+
<div class="col s12 m9 l12">
13+
<div class="section">
14+
<p class="caption">
15+
You can attach the router links to the buttons.
16+
</p>
17+
<div class="col s12 m9 l12 showcase-tabs">
18+
<ul class="anchor-links">
19+
<li class="col s4"><a class="waves-effect btn" href="#preview">Preview</a></li>
20+
<li class="col s4"><a class="waves-effect btn" href="#html">HTML</a></li>
21+
<li class="col s3"><a class="waves-effect btn" href="#ts">Typescript</a></li>
22+
</ul>
23+
</div>
24+
<div id="preview" class="col s12 m9 l12">
25+
<h4 class="header">Preview</h4>
26+
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
27+
</div>
28+
<app-router-link-snippet></app-router-link-snippet>
29+
</div>
30+
</div>
31+
</div>
32+
</div>

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { AfterViewInit, Component, OnInit, Renderer } from '@angular/core';
2+
import { Router } from '@angular/router';
3+
4+
@Component({
5+
selector: 'app-router-link',
6+
templateUrl: 'router-link.component.html'
7+
})
8+
export class RouterLinkComponent implements AfterViewInit, OnInit {
9+
dtOptions: DataTables.Settings = {};
10+
11+
constructor(private renderer: Renderer, private router: Router) { }
12+
13+
ngOnInit(): void {
14+
this.dtOptions = {
15+
ajax: 'data/data.json',
16+
columns: [{
17+
title: 'ID',
18+
data: 'id'
19+
}, {
20+
title: 'First name',
21+
data: 'firstName'
22+
}, {
23+
title: 'Last name',
24+
data: 'lastName'
25+
}, {
26+
title: 'Action',
27+
render: function (data: any, type: any, full: any) {
28+
return '<button class="waves-effect btn" view-person-id="' + full.id + '">View</button>';
29+
}
30+
}]
31+
};
32+
}
33+
34+
ngAfterViewInit(): void {
35+
this.renderer.listenGlobal('document', 'click', (event) => {
36+
if (event.target.hasAttribute("view-person-id")) {
37+
this.router.navigate(["/person/" + event.target.getAttribute("view-person-id")]);
38+
}
39+
});
40+
}
41+
}

‎demo/src/app/advanced/row-click-event-snippet.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export class RowClickEventSnippetComponent {
2525

2626
tsSnippet = `
2727
<pre>
28-
<code class="typescript highlight">import { Component, NgZone, OnInit } from '@angular/core';
28+
<code class="typescript highlight">import { Component, OnInit } from '@angular/core';
2929
3030
@Component({
3131
selector: 'row-click-event',
@@ -35,7 +35,7 @@ export class RowClickEventComponent implements OnInit {
3535
message = '';
3636
dtOptions: DataTables.Settings = {};
3737
38-
constructor(private zone: NgZone) { }
38+
constructor() { }
3939
4040
someClickHandler(info: any): void {
4141
this.message = info.id + ' - ' + info.firstName;

‎demo/src/app/advanced/row-click-event.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, NgZone, OnInit } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
22

33
@Component({
44
selector: 'app-row-click-event',
@@ -8,7 +8,7 @@ export class RowClickEventComponent implements OnInit {
88
message = '';
99
dtOptions: DataTables.Settings = {};
1010

11-
constructor(private zone: NgZone) { }
11+
constructor() { }
1212

1313
someClickHandler(info: any): void {
1414
this.message = info.id + ' - ' + info.firstName;

‎demo/src/app/app.component.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,9 @@ <h3>
8686
<li>
8787
<a routerLink="/advanced/multiple-tables">Multiple tables</a>
8888
</li>
89+
<li>
90+
<a routerLink="/advanced/router-link">Router link</a>
91+
</li>
8992
</ul>
9093
</div>
9194
</li>

‎demo/src/app/app.module.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { AppRoutingModule } from './app.routing';
1313
import { AppComponent } from './app.component';
1414
import { WelcomeComponent } from './welcome.component';
1515
import { GettingStartedComponent } from './getting-started.component';
16+
import { PersonComponent } from './person.component';
1617

1718
// Basic examples
1819
import { ZeroConfigComponent } from './basic/zero-config.component';
@@ -41,6 +42,8 @@ import { RowClickEventComponent } from './advanced/row-click-event.component';
4142
import { RowClickEventSnippetComponent } from './advanced/row-click-event-snippet.component';
4243
import { MultipleTablesComponent } from './advanced/multiple-tables.component';
4344
import { MultipleTablesSnippetComponent } from './advanced/multiple-tables-snippet.component';
45+
import { RouterLinkComponent } from './advanced/router-link.component';
46+
import { RouterLinkSnippetComponent } from './advanced/router-link-snippet.component';
4447

4548
// Using extension examples
4649
import { ButtonsExtensionComponent } from './extensions/buttons-extension.component';
@@ -61,6 +64,7 @@ import { SelectExtensionConfigurationComponent } from './extensions/select-exten
6164
AppComponent,
6265
WelcomeComponent,
6366
GettingStartedComponent,
67+
PersonComponent,
6468

6569
ZeroConfigComponent,
6670
ZeroConfigSnippetComponent,
@@ -87,6 +91,8 @@ import { SelectExtensionConfigurationComponent } from './extensions/select-exten
8791
RowClickEventSnippetComponent,
8892
MultipleTablesComponent,
8993
MultipleTablesSnippetComponent,
94+
RouterLinkComponent,
95+
RouterLinkSnippetComponent,
9096

9197
ButtonsExtensionComponent,
9298
ButtonsExtensionSnippetComponent,

‎demo/src/app/app.routing.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
33

44
import { WelcomeComponent } from './welcome.component';
55
import { GettingStartedComponent } from './getting-started.component';
6+
import { PersonComponent } from './person.component';
67

78
import { ZeroConfigComponent } from './basic/zero-config.component';
89
import { WithOptionsComponent } from './basic/with-options.component';
@@ -17,6 +18,7 @@ import { LoadDtOptionsWithPromiseComponent } from './advanced/load-dt-options-wi
1718
import { RerenderComponent } from './advanced/rerender.component';
1819
import { RowClickEventComponent } from './advanced/row-click-event.component';
1920
import { MultipleTablesComponent } from './advanced/multiple-tables.component';
21+
import { RouterLinkComponent } from './advanced/router-link.component';
2022

2123
import { ButtonsExtensionComponent } from './extensions/buttons-extension.component';
2224
import { ColreorderExtensionComponent } from './extensions/colreorder-extension.component';
@@ -37,6 +39,10 @@ const routes: Routes = [
3739
path: 'getting-started',
3840
component: GettingStartedComponent
3941
},
42+
{
43+
path: 'person/:id',
44+
component: PersonComponent
45+
},
4046
{
4147
path: 'basic/zero-config',
4248
component: ZeroConfigComponent
@@ -85,6 +91,10 @@ const routes: Routes = [
8591
path: 'advanced/multiple-tables',
8692
component: MultipleTablesComponent
8793
},
94+
{
95+
path: 'advanced/router-link',
96+
component: RouterLinkComponent
97+
},
8898
{
8999
path: 'extensions/buttons',
90100
component: ButtonsExtensionComponent

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
import { Component, OnInit } from '@angular/core';
22
import { Http, Response } from '@angular/http';
33
import { Subject } from 'rxjs/Subject';
4+
import { Person } from '../person';
45

56
import 'rxjs/add/operator/map';
67

7-
class Person {
8-
id: number;
9-
firstName: string;
10-
lastName: string;
11-
}
12-
138
@Component({
149
selector: 'app-angular-way',
1510
templateUrl: 'angular-way.component.html'

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import { Component, OnInit } from '@angular/core';
22
import { HttpClient, HttpResponse } from '@angular/common/http';
3-
4-
class Person {
5-
id: number;
6-
firstName: string;
7-
lastName: string;
8-
}
3+
import { Person } from '../person';
94

105
class DataTablesResponse {
116
data: any[];

‎demo/src/app/person.component.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div class="section banner">
2+
<div class="container">
3+
<div class="row">
4+
<div class="col s12 m9">
5+
<h1 class="header center-on-small-only">Person details</h1>
6+
</div>
7+
</div>
8+
</div>
9+
</div>
10+
<div class="container">
11+
<div class="row">
12+
<div class="col s12 m9 l12">
13+
<div class="section">
14+
<div class="col s12 m9 l12 showcase-tabs">
15+
<section highlight-js-content=".json">
16+
<pre *ngIf="person">
17+
<code class="json highlight">{{person|json}}</code>
18+
</pre>
19+
</section>
20+
<button class="waves-effect btn" (click)="goBack()">Go back</button>
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
</div>

‎demo/src/app/person.component.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Component, Input, OnInit } from '@angular/core';
2+
import { ActivatedRoute } from '@angular/router';
3+
import { Location } from '@angular/common';
4+
import { Person } from './person';
5+
import { PersonService } from './person.service';
6+
7+
@Component({
8+
selector: 'app-person',
9+
templateUrl: 'person.component.html',
10+
providers: [PersonService]
11+
})
12+
export class PersonComponent implements OnInit {
13+
person: Person;
14+
15+
constructor(
16+
private route: ActivatedRoute,
17+
private location: Location,
18+
private personService: PersonService
19+
) { }
20+
21+
ngOnInit(): void {
22+
const id = +this.route.snapshot.paramMap.get('id');
23+
this.person = this.personService.getPerson(id);
24+
}
25+
26+
goBack(): void {
27+
this.location.back();
28+
}
29+
}

‎demo/src/app/person.service.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Injectable } from '@angular/core';
2+
3+
import { Person } from './person';
4+
5+
import * as data from '../data/data.json';
6+
7+
@Injectable()
8+
export class PersonService {
9+
constructor() { }
10+
11+
getPerson(id: number): Person {
12+
const persons = (<any>data).data;
13+
return persons.filter(person => person.id === id)[0];
14+
}
15+
}

‎demo/src/app/person.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export class Person {
2+
id: number;
3+
firstName: string;
4+
lastName: string;
5+
}

0 commit comments

Comments
 (0)