Add filter route-param demo for Angular 7.2.14. · iCodeIN/JavaScript-Demos@b1b30b0 · GitHub
Skip to content

Commit b1b30b0

Browse files
bennadelbennadel
committed
Add filter route-param demo for Angular 7.2.14.
1 parent 986a610 commit b1b30b0

28 files changed

Lines changed: 8177 additions & 0 deletions

‎README.md‎

Lines changed: 1 addition & 0 deletions

‎demos/router-filter-replace-state-angular7/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
# Now that we're using Webpack, we can install modules locally and just ignore
3+
# them since the assets are baked into the compiled modules.
4+
node_modules/

‎demos/router-filter-replace-state-angular7/app/app.component.less‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 18px ;
5+
}
6+
7+
a {
8+
color: red ;
9+
}

‎demos/router-filter-replace-state-angular7/app/app.component.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// ----------------------------------------------------------------------------------- //
6+
// ----------------------------------------------------------------------------------- //
7+
8+
@Component({
9+
selector: "my-app",
10+
styleUrls: [ "./app.component.less" ],
11+
template:
12+
`
13+
<p>
14+
<a routerLink="/">Home</a>
15+
&mdash;
16+
<a routerLink="./people">People</a>
17+
</p>
18+
19+
<router-outlet></router-outlet>
20+
`
21+
})
22+
export class AppComponent {
23+
24+
// I initialize the app view component.
25+
constructor() {
26+
27+
document.title = "Home";
28+
29+
}
30+
31+
}

‎demos/router-filter-replace-state-angular7/app/app.module.ts‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
2+
// Import the core angular services.
3+
import { BrowserModule } from "@angular/platform-browser";
4+
import { FormsModule } from "@angular/forms";
5+
import { NgModule } from "@angular/core";
6+
import { RouterModule } from "@angular/router";
7+
8+
// Import the application components and services.
9+
import { AppComponent } from "./app.component";
10+
import { PeopleDetailComponent } from "./people-detail.component";
11+
import { PeopleListComponent } from "./people-list.component";
12+
13+
// ----------------------------------------------------------------------------------- //
14+
// ----------------------------------------------------------------------------------- //
15+
16+
@NgModule({
17+
imports: [
18+
BrowserModule,
19+
FormsModule,
20+
RouterModule.forRoot(
21+
[
22+
{
23+
path: "people",
24+
children: [
25+
// NOTE: Local redirect from (/people) to (/people/list).
26+
{
27+
path: "",
28+
pathMatch: "full",
29+
redirectTo: "list"
30+
},
31+
{
32+
path: "list",
33+
component: PeopleListComponent
34+
},
35+
{
36+
path: ":personID/detail",
37+
component: PeopleDetailComponent
38+
}
39+
]
40+
}
41+
],
42+
{
43+
// Tell the router to use the hash instead of HTML5 pushstate.
44+
useHash: true,
45+
46+
// Enable the Angular 6+ router features for scrolling and anchors.
47+
scrollPositionRestoration: "enabled",
48+
anchorScrolling: "enabled",
49+
enableTracing: false
50+
}
51+
)
52+
],
53+
providers: [
54+
// CAUTION: We don't need to specify the LocationStrategy because we are setting
55+
// the "useHash" property in the Router module above (which will be setting the
56+
// strategy for us).
57+
// --
58+
// {
59+
// provide: LocationStrategy,
60+
// useClass: HashLocationStrategy
61+
// }
62+
],
63+
declarations: [
64+
AppComponent,
65+
PeopleDetailComponent,
66+
PeopleListComponent
67+
],
68+
bootstrap: [
69+
AppComponent
70+
]
71+
})
72+
export class AppModule {
73+
// ...
74+
}

‎demos/router-filter-replace-state-angular7/app/main.htm‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Using replaceUrl To Persist Search Filters In The URL Without Messing Up The Browser History In Angular 7.2.14
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Using replaceUrl To Persist Search Filters In The URL Without Messing Up The Browser History In Angular 7.2.14
14+
</h1>
15+
16+
<my-app>
17+
<p>
18+
<em>Loading files...</em>
19+
</p>
20+
21+
<p>
22+
npm Run Scripts:
23+
</p>
24+
25+
<ul>
26+
<li>
27+
<strong>npm run build</strong> &mdash; Compiles the .ts file into bundles.
28+
</li>
29+
<li>
30+
<strong>npm run watch</strong> &mdash; Compiles the .ts file into bundles and then watches files for changes.
31+
</li>
32+
</ul>
33+
</my-app>
34+
35+
</body>
36+
</html>

‎demos/router-filter-replace-state-angular7/app/main.polyfill.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
// Import these libraries for their side-effects.
3+
import "core-js/es";
4+
import "zone.js/dist/zone.js";

‎demos/router-filter-replace-state-angular7/app/main.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
// Import the core angular services.
3+
import { enableProdMode } from "@angular/core";
4+
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
5+
6+
// Import the root module for bootstrapping.
7+
import { AppModule } from "./app.module";
8+
9+
// ----------------------------------------------------------------------------------- //
10+
// ----------------------------------------------------------------------------------- //
11+
12+
// NOTE: This ENV value is being provided by Webpack's DefinePlugin. It is populated
13+
// on the mode in which the webpack-cli was invoked.
14+
if ( process.env.NODE_ENV === "production" ) {
15+
16+
enableProdMode();
17+
18+
}
19+
20+
platformBrowserDynamic().bootstrapModule( AppModule );

‎demos/router-filter-replace-state-angular7/app/people-detail.component.less‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
:host {
3+
display: block ;
4+
}
5+
6+
.details {
7+
&__label {
8+
font-weight: bold ;
9+
}
10+
11+
&__value {
12+
margin-bottom: 10px ;
13+
}
14+
}

‎demos/router-filter-replace-state-angular7/app/people-detail.component.ts‎

Lines changed: 87 additions & 0 deletions

0 commit comments

Comments
 (0)