Skip to content

Commit 787dcdd

Browse files
bennadelbennadel
committed
Add simple demo of mixed component lists in Angular 7.2.13.
1 parent 25adf32 commit 787dcdd

28 files changed

Lines changed: 7556 additions & 0 deletions

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

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

13+
* [Rendering A List Of Mixed Components Using NgFor And NgSwitch In Angular 7.2.13](https://bennadel.github.io/JavaScript-Demos/demos/ng-for-mixed-types-angular7/)
1314
* [An Experiment In Consuming Reactive-Form Events From Template-Driven Forms In Angular 7.2.13](https://bennadel.github.io/JavaScript-Demos/demos/template-form-changes-angular7/)
1415
* [My First - And Possibly Last - Look At Reactive Forms In Angular 7.2.13](https://bennadel.github.io/JavaScript-Demos/demos/dynamic-reative-forms-angular7/)
1516
* [Using "replaceUrl" In Order To Honor The Back-Button While Chaining Absolute Redirects In Angular 7.2.13](https://bennadel.github.io/JavaScript-Demos/demos/router-chained-absolute-redirect2-angular7/)

‎demos/ng-for-mixed-types-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/ng-for-mixed-types-angular7/app/app.component.htm‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
2+
<!--
3+
When rendering a list that contains components, it's always helpful to separate out
4+
the "layout concerns" from the "content concerns". Meaning, UL and LI elements here
5+
don't concern themselves with the list content - only with the rendering of the list
6+
infrastructure.
7+
-->
8+
<ul class="items">
9+
<li
10+
*ngFor="let thing of things"
11+
class="items__item"
12+
[ngSwitch]="thing.type">
13+
14+
<!--
15+
Inside of the list-item, we can now focus on the items that we are actually
16+
displaying. And to cope with a "mixed list", let's use the ngSwitch directive
17+
(above) and the ngSwitchCase directive (below) to conditionally render the
18+
appropriate component based on the item Type.
19+
--
20+
NOTE: We could have put the *ngSwitchCase directly on the Thing Components;
21+
but, using an ng-template helps to articulate the mutually-exclusive nature
22+
of the components within the list context.
23+
-->
24+
<ng-template ngSwitchCase="a">
25+
26+
<my-thing-a
27+
[value]="thing.value"
28+
(click)="handlClick( thing )">
29+
</my-thing-a>
30+
31+
</ng-template>
32+
<ng-template ngSwitchCase="b">
33+
34+
<my-thing-b
35+
[value]="thing.value"
36+
(click)="handlClick( thing )">
37+
</my-thing-b>
38+
39+
</ng-template>
40+
41+
</li>
42+
</ul>

‎demos/ng-for-mixed-types-angular7/app/app.component.less‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 18px ;
5+
}
6+
7+
.items {
8+
list-style-type: none ;
9+
margin: 20px 0px 20px 0px ;
10+
padding: 0px 0px 0px 0px ;
11+
width: 250px ;
12+
13+
&__item {
14+
margin: 10px 0px 10px 0px ;
15+
}
16+
}

‎demos/ng-for-mixed-types-angular7/app/app.component.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// ----------------------------------------------------------------------------------- //
6+
// ----------------------------------------------------------------------------------- //
7+
8+
interface Thing {
9+
type: "a" | "b";
10+
value: string;
11+
}
12+
13+
@Component({
14+
selector: "my-app",
15+
styleUrls: [ "./app.component.less" ],
16+
templateUrl: "./app.component.htm"
17+
})
18+
export class AppComponent {
19+
20+
public things: Thing[];
21+
22+
// I initialize the app component.
23+
constructor() {
24+
25+
// When dealing with a mixed-list of data, we need to have some sort of
26+
// differentiator ("type" in this case) so that we can figure out which item
27+
// maps to which class of component in the View.
28+
this.things = [
29+
{ type: "a", value: "A1" },
30+
{ type: "a", value: "A2" },
31+
{ type: "b", value: "B1" },
32+
{ type: "a", value: "A3" },
33+
{ type: "b", value: "B2" }
34+
];
35+
36+
}
37+
38+
// ---
39+
// PUBLIC METHODS.
40+
// ---
41+
42+
// I log the clicked thing.
43+
public handlClick( thing: Thing ) : void {
44+
45+
console.group( "You clicked a thing!" );
46+
console.log( thing );
47+
console.groupEnd();
48+
49+
}
50+
51+
}

‎demos/ng-for-mixed-types-angular7/app/app.module.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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 { ThingAComponent } from "./thing-a.component";
9+
import { ThingBComponent } from "./thing-b.component";
10+
11+
// ----------------------------------------------------------------------------------- //
12+
// ----------------------------------------------------------------------------------- //
13+
14+
@NgModule({
15+
imports: [
16+
BrowserModule
17+
],
18+
declarations: [
19+
AppComponent,
20+
ThingAComponent,
21+
ThingBComponent
22+
],
23+
bootstrap: [
24+
AppComponent
25+
]
26+
})
27+
export class AppModule {
28+
// ...
29+
}

‎demos/ng-for-mixed-types-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+
Rendering A List Of Mixed Components Using NgFor And NgSwitch In Angular 7.2.13
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Rendering A List Of Mixed Components Using NgFor And NgSwitch In Angular 7.2.13
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/ng-for-mixed-types-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/ng-for-mixed-types-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/ng-for-mixed-types-angular7/app/thing-a.component.less‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
:host {
3+
border: 1px solid #cccccc ;
4+
border-radius: 4px 4px 4px 4px ;
5+
cursor: pointer ;
6+
display: block ;
7+
padding: 10px 10px 10px 10px ;
8+
}

0 commit comments

Comments
 (0)