Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 3f29bdc

Browse filesBrowse files
bennadelbennadel
committed
Add wild-card route for nested data in Angular 7.
1 parent cd4326e commit 3f29bdc
Copy full SHA for 3f29bdc
Expand file treeCollapse file tree

22 files changed

+11342
-0
lines changed
Open diff view settings
Collapse file

‎README.md‎

Copy file name to clipboardExpand all lines: README.md
+1Lines changed: 1 addition & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Using A Wild Card Route (**) To Traverse Arbitrarily Nested Data In Angular 7.2.4](https://bennadel.github.io/JavaScript-Demos/demos/router-folder-like-structure-angular7/)
1314
* [Trying To Implement 9-Slice Scaling With SVG Components In Angular 7.2.4](https://bennadel.github.io/JavaScript-Demos/demos/svg-9-slice-scaling-angular7/)
1415
* [Hacking Scoped CSS Modules Into A Brownfield AngularJS 1.2.22 Application](https://bennadel.github.io/JavaScript-Demos/demos/css-modules-angularjs/)
1516
* [Renderless Components In Angular 7.2.0](https://bennadel.github.io/JavaScript-Demos/demos/renderless-components-angular7/)
Collapse file

‎demos/router-folder-like-structure-angular7/.gitignore‎

Copy file name to clipboard
+4Lines 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/
Collapse file

‎demos/router-folder-like-structure-angular7/app/app.component.less‎

Copy file name to clipboard
+14Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 18px ;
5+
}
6+
7+
my-popup {
8+
display: table ;
9+
margin: 20px 0px 20px 0px ;
10+
}
11+
12+
.author {
13+
padding: 10px 0px 0px 20px ;
14+
}
Collapse file

‎demos/router-folder-like-structure-angular7/app/app.component.ts‎

Copy file name to clipboard
+22Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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="/go">Go to Demo</a>
15+
</p>
16+
17+
<router-outlet></router-outlet>
18+
`
19+
})
20+
export class AppComponent {
21+
// ...
22+
}
Collapse file

‎demos/router-folder-like-structure-angular7/app/app.module.ts‎

Copy file name to clipboard
+65Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
2+
// Import the core angular services.
3+
import { BrowserModule } from "@angular/platform-browser";
4+
import { NgModule } from "@angular/core";
5+
import { RouterModule } from "@angular/router";
6+
7+
// Import the application components and services.
8+
import { AppComponent } from "./app.component";
9+
import { GoTreeComponent } from "./go-tree.component";
10+
11+
// ----------------------------------------------------------------------------------- //
12+
// ----------------------------------------------------------------------------------- //
13+
14+
@NgModule({
15+
imports: [
16+
BrowserModule,
17+
RouterModule.forRoot(
18+
[
19+
{
20+
path: "go",
21+
children: [
22+
// We're doing to use a "sink" route to capture an arbitrary
23+
// path after the "go" segment. This path will represent the
24+
// user's point-of-traversal into the hierarchical data. The
25+
// segments in this arbitrary path will be accessible via the
26+
// "url" portion of the ActivatedRoute.
27+
{
28+
path: "**",
29+
component: GoTreeComponent
30+
}
31+
]
32+
}
33+
],
34+
{
35+
// Tell the router to use the hash instead of HTML5 pushstate.
36+
useHash: true,
37+
38+
// Enable the Angular 6+ router features for scrolling and anchors.
39+
scrollPositionRestoration: "enabled",
40+
anchorScrolling: "enabled",
41+
enableTracing: false
42+
}
43+
)
44+
],
45+
providers: [
46+
// CAUTION: We don't need to specify the LocationStrategy because we are setting
47+
// the "useHash" property in the Router module above (which will be setting the
48+
// strategy for us).
49+
// --
50+
// {
51+
// provide: LocationStrategy,
52+
// useClass: HashLocationStrategy
53+
// }
54+
],
55+
declarations: [
56+
AppComponent,
57+
GoTreeComponent
58+
],
59+
bootstrap: [
60+
AppComponent
61+
]
62+
})
63+
export class AppModule {
64+
// ...
65+
}
Collapse file

‎demos/router-folder-like-structure-angular7/app/go-tree.component.less‎

Copy file name to clipboard
+22Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
:host {
3+
border-top: 2px solid #cccccc ;
4+
display: block ;
5+
font-size: 20px ;
6+
line-height: 28px ;
7+
margin: 20px 0px 20px 0px ;
8+
padding-top: 20px ;
9+
}
10+
11+
.breadcrumbs {
12+
display: flex ;
13+
14+
a {
15+
margin-right: 12px ;
16+
}
17+
18+
span {
19+
color: #999999 ;
20+
margin-right: 12px ;
21+
}
22+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.