Skip to content

Commit 847fb77

Browse files
bennadelbennadel
committed
Add inline autocomplete demo for Angular 7.2.15.
1 parent ec4e1d0 commit 847fb77

24 files changed

Lines changed: 7886 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+
* [Creating An Inline Auto-Complete Directive Using NgValue And A Control Value Accessor In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/inline-auto-complete-input-angular7/)
1314
* [Desktop Safari Seems To Add Extra Padding To CSS Flexbox Item Inside List Item](https://bennadel.github.io/JavaScript-Demos/demos/safari-li-flexbox-wonky/)
1415
* [Trying To Center A Text-Overflow Ellipsis Using CSS Flexbox In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/center-ellipsis-angular7/)
1516
* [Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox](https://bennadel.github.io/JavaScript-Demos/demos/cast-list-flexbox2/)

‎demos/inline-auto-complete-input-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/inline-auto-complete-input-angular7/app/app.component.less‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 18px ;
5+
}
6+
7+
.input {
8+
border: 1px solid #cccccc ;
9+
border-radius: 5px 5px 5px 5px ;
10+
font-size: 20px ;
11+
padding: 5px 9px 5px 9px ;
12+
width: 400px ;
13+
}
14+
15+
a {
16+
color: red ;
17+
cursor: pointer ;
18+
text-decoration: underline ;
19+
user-select: none ;
20+
-moz-user-select: none ;
21+
-webkit-user-select: none ;
22+
}

‎demos/inline-auto-complete-input-angular7/app/app.component.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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+
<input
14+
name="value"
15+
type="text"
16+
[(ngModel)]="form.value"
17+
18+
[ngModelSuggestions]="suggestions"
19+
20+
autocomplete="off"
21+
autofocus
22+
class="input"
23+
/>
24+
25+
<p>
26+
<strong>NgModel Value:</strong> {{ form.value }}
27+
</p>
28+
29+
<h2>
30+
Suggestions:
31+
</h2>
32+
33+
<ul>
34+
<li *ngFor="let suggestion of suggestions">
35+
{{ suggestion }}
36+
</li>
37+
</ul>
38+
`
39+
})
40+
export class AppComponent {
41+
42+
public form: {
43+
value: string;
44+
};
45+
public suggestions: string[];
46+
47+
// I initialize the app component.
48+
constructor() {
49+
50+
this.form = {
51+
value: ""
52+
};
53+
this.suggestions = [
54+
"I like to move it move it",
55+
"I like big butts and I cannot lie",
56+
"I like it like that",
57+
"I like turtles",
58+
"I like the way you move",
59+
"I love lamp",
60+
"I love the way you make me feel",
61+
"I love that thing you do"
62+
];
63+
64+
}
65+
66+
}

‎demos/inline-auto-complete-input-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 { 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 { NgModelSuggestionsDirective } from "./ng-model-suggestions.directive";
10+
11+
// ----------------------------------------------------------------------------------- //
12+
// ----------------------------------------------------------------------------------- //
13+
14+
@NgModule({
15+
imports: [
16+
BrowserModule,
17+
FormsModule
18+
],
19+
declarations: [
20+
AppComponent,
21+
NgModelSuggestionsDirective
22+
],
23+
bootstrap: [
24+
AppComponent
25+
]
26+
})
27+
export class AppModule {
28+
// ...
29+
}

‎demos/inline-auto-complete-input-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+
Creating An Inline Auto-Complete Directive Using NgValue And A Control Value Accessor In Angular 7.2.15
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Creating An Inline Auto-Complete Directive Using NgValue And A Control Value Accessor In Angular 7.2.15
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/inline-auto-complete-input-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/inline-auto-complete-input-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 );

0 commit comments

Comments
 (0)