Skip to content

Commit fbacdf7

Browse files
bennadelbennadel
committed
Exploring input binding notation behaviors in Angular 7.2.13.
1 parent f4175ee commit fbacdf7

23 files changed

Lines changed: 7621 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+
* [@Directive().inputs And @Input() Are Not Functionally Equivalent In Angular 7.2.13](https://bennadel.github.io/JavaScript-Demos/demos/input-binding-notation-angular7/)
1314
* [Quick Reference For NgModel Values And Template-Driven Forms In Angular 7.2.13](https://bennadel.github.io/JavaScript-Demos/demos/form-controls-reference-angular7/)
1415
* [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/)
1516
* [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/)

‎demos/input-binding-notation-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/input-binding-notation-angular7/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/input-binding-notation-angular7/app/app.component.ts‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
import { Directive } from "@angular/core";
5+
import { Input } from "@angular/core";
6+
7+
// ----------------------------------------------------------------------------------- //
8+
// ----------------------------------------------------------------------------------- //
9+
10+
@Component({
11+
selector: "my-app",
12+
styleUrls: [ "./app.component.less" ],
13+
template:
14+
`
15+
<p customProp="Testing [customProp]">
16+
Super directive...
17+
</p>
18+
<p customProp2="Testing [customProp2]">
19+
Sub directive...
20+
</p>
21+
`
22+
})
23+
export class AppComponent {
24+
// ....
25+
}
26+
27+
// ----------------------------------------------------------------------------------- //
28+
// ----------------------------------------------------------------------------------- //
29+
/*
30+
@Directive({
31+
selector: "[customProp]",
32+
// In the SUPER class, we're going to use the @Directive.inputs meta-data to tell
33+
// Angular that the class property, "customProp", maps to a template attribute of the
34+
// same name.
35+
inputs: [
36+
"customProp"
37+
]
38+
})
39+
export class CustomPropDirective {
40+
41+
public customProp!: string; // Using definite assignment assertion.
42+
43+
// ---
44+
// PUBLIC METHODS.
45+
// ---
46+
47+
// I get called whenever one of the input bindings is changed.
48+
public ngOnChanges( c: any ) : void {
49+
50+
console.log( "Prop:", this.customProp );
51+
52+
}
53+
54+
}
55+
56+
@Directive({
57+
selector: "[customProp2]",
58+
// In the SUB class, we're going to use the @Directive.inputs meta-data to tell
59+
// Angular that the inherited property maps to a template attribute with a different
60+
// name, "customProp2". So, both classes will use the same internal class property;
61+
// but, they will be using two different template attributes.
62+
inputs: [
63+
"customProp: customProp2"
64+
]
65+
})
66+
export class CustomProp2Directive extends CustomPropDirective {
67+
// ....
68+
}
69+
*/
70+
// ----------------------------------------------------------------------------------- //
71+
// ----------------------------------------------------------------------------------- //
72+
73+
@Directive({
74+
selector: "[customProp]",
75+
// In the SUPER class, we're going to use the @Directive.inputs meta-data to tell
76+
// Angular that the class property, "customProp", maps to a template attribute of the
77+
// same name.
78+
inputs: [
79+
"customProp"
80+
]
81+
})
82+
export class CustomPropDirective {
83+
84+
public customProp!: string; // Using definite assignment assertion.
85+
86+
// ---
87+
// PUBLIC METHODS.
88+
// ---
89+
90+
// I get called whenever one of the input bindings is changed.
91+
public ngOnChanges( c: any ) : void {
92+
93+
console.log( "Prop:", this.customProp );
94+
95+
}
96+
97+
}
98+
99+
@Directive({
100+
selector: "[customProp2]"
101+
})
102+
export class CustomProp2Directive extends CustomPropDirective {
103+
104+
// Using @Input() meta-data in the sub-class WILL override the @Directive.inputs in
105+
// the super-class.
106+
@Input( "customProp2" )
107+
public customProp!: string; // Using definite assignment assertion.
108+
109+
}

‎demos/input-binding-notation-angular7/app/app.module.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 { BrowserModule } from "@angular/platform-browser";
4+
import { FormsModule } from "@angular/forms";
5+
import { NgModule } from "@angular/core";
6+
7+
// Import the application components and services.
8+
import { AppComponent } from "./app.component";
9+
import { CustomPropDirective } from "./app.component";
10+
import { CustomProp2Directive } from "./app.component";
11+
12+
// ----------------------------------------------------------------------------------- //
13+
// ----------------------------------------------------------------------------------- //
14+
15+
@NgModule({
16+
imports: [
17+
BrowserModule,
18+
FormsModule
19+
],
20+
declarations: [
21+
AppComponent,
22+
CustomPropDirective,
23+
CustomProp2Directive
24+
],
25+
bootstrap: [
26+
AppComponent
27+
]
28+
})
29+
export class AppModule {
30+
// ...
31+
}

‎demos/input-binding-notation-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+
@Directive().inputs And @Input() Are Not Functionally Equivalent In Angular 7.2.13
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
@Directive().inputs And @Input() Are Not Functionally Equivalent 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/input-binding-notation-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/input-binding-notation-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/input-binding-notation-angular7/build/main.1b76462a2b1ec3c4f594.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/input-binding-notation-angular7/build/main.1b76462a2b1ec3c4f594.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)