Add recursive component demo in Angular 6.1.10. · blxtar/JavaScript-Demos@6107935 · GitHub
Skip to content

Commit 6107935

Browse files
bennadelbennadel
committed
Add recursive component demo in Angular 6.1.10.
1 parent 691ab20 commit 6107935

24 files changed

Lines changed: 9626 additions & 0 deletions

‎README.md‎

Lines changed: 1 addition & 0 deletions

‎demos/recursive-components-angular6/.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/recursive-components-angular6/app/app.component.less‎

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

‎demos/recursive-components-angular6/app/app.component.ts‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// Import the application components and services.
6+
import { TreeNode } from "./tree/tree.module";
7+
8+
// ----------------------------------------------------------------------------------- //
9+
// ----------------------------------------------------------------------------------- //
10+
11+
@Component({
12+
selector: "my-app",
13+
styleUrls: [ "./app.component.less" ],
14+
template:
15+
`
16+
<my-tree
17+
[rootNode]="tree"
18+
[selectedNode]="selectedTreeNode"
19+
(select)="handleSelection( $event )">
20+
</my-tree>
21+
`
22+
})
23+
export class AppComponent {
24+
25+
public tree: TreeNode;
26+
public selectedTreeNode: TreeNode | null;
27+
28+
// I initialize the app component.
29+
constructor() {
30+
31+
this.selectedTreeNode = null;
32+
this.tree = {
33+
label: "first",
34+
children: [
35+
{
36+
label: "second-a",
37+
children: [
38+
{
39+
label: "third-first",
40+
children: [
41+
{
42+
label: "ferth",
43+
children: [
44+
{
45+
label: "fiver",
46+
children: []
47+
}
48+
]
49+
}
50+
]
51+
}
52+
]
53+
},
54+
{
55+
label: "second-b",
56+
children: [
57+
{
58+
label: "third",
59+
children: []
60+
}
61+
]
62+
}
63+
]
64+
};
65+
66+
}
67+
68+
// ---
69+
// PUBLIC METHODS.
70+
// ---
71+
72+
// I handle the selection event from the tree component.
73+
public handleSelection( node: TreeNode ) : void {
74+
75+
this.selectedTreeNode = node;
76+
77+
console.group( "Selected Tree Node" );
78+
console.log( "Label:", node.label );
79+
console.log( "Children:", node.children.length );
80+
console.groupEnd();
81+
82+
}
83+
84+
}

‎demos/recursive-components-angular6/app/app.module.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
// Import the core angular services.
3+
import { BrowserModule } from "@angular/platform-browser";
4+
import { NgModule } from "@angular/core";
5+
6+
// Import the application components and services.
7+
import { AppComponent } from "./app.component";
8+
import { TreeModule } from "./tree/tree.module";
9+
10+
// ----------------------------------------------------------------------------------- //
11+
// ----------------------------------------------------------------------------------- //
12+
13+
@NgModule({
14+
imports: [
15+
BrowserModule,
16+
TreeModule
17+
],
18+
declarations: [
19+
AppComponent
20+
],
21+
bootstrap: [
22+
AppComponent
23+
]
24+
})
25+
export class AppModule {
26+
// ...
27+
}

‎demos/recursive-components-angular6/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+
Playing With Recursive Components In Angular 6.1.10
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Playing With Recursive Components In Angular 6.1.10
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/recursive-components-angular6/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/client/shim.min.js";
4+
import "zone.js/dist/zone.js";

‎demos/recursive-components-angular6/app/main.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
// Import for side effects - we have to import this first so that the polyfills will
3+
// be available for the rest of the code.
4+
// --
5+
// NOTE: I would normally include this as an Entry bundle; but, I couldn't get the
6+
// HtmlWebpackPlugin to work properly if I did that (since I don't think it could
7+
// implicitly determine the dependency order). In the future, I might be able to make
8+
// this more dynamic (ie, use Webpack's import() syntax).
9+
import "./main.polyfill";
10+
11+
// ----------------------------------------------------------------------------------- //
12+
// ----------------------------------------------------------------------------------- //
13+
14+
// Import the core angular services.
15+
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
16+
17+
// Import the root module for bootstrapping.
18+
import { AppModule } from "./app.module";
19+
20+
platformBrowserDynamic().bootstrapModule( AppModule );

‎demos/recursive-components-angular6/app/tree/tree-node.component.less‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
2+
:host {
3+
display: block ;
4+
}
5+
6+
.label {
7+
border-radius: 9px 9px 9px 9px ;
8+
color: red ;
9+
cursor: pointer ;
10+
display: inline-block ;
11+
padding: 0px 6px 0px 6px ;
12+
text-decoration: underline ;
13+
}
14+
15+
.children {
16+
border-left: 3px solid #CCCCCC ;
17+
margin: 5px 0px 5px 30px ;
18+
padding-left: 10px ;
19+
}
20+
21+
:host( .selected ) {
22+
> .label {
23+
background-color: darkslateblue ;
24+
color: white ;
25+
cursor: default ;
26+
font-weight: bold ;
27+
text-decoration: none ;
28+
}
29+
}

‎demos/recursive-components-angular6/app/tree/tree-node.component.ts‎

Lines changed: 58 additions & 0 deletions

0 commit comments

Comments
 (0)