Skip to content

Commit fbcceb1

Browse files
piyalidas10piyalidas10
committed
search
0 parents  commit fbcceb1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+14783
-0
lines changed

‎.browserslistrc

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2+
# For additional information regarding the format and rule options, please see:
3+
# https://github.com/browserslist/browserslist#queries
4+
5+
# For the full list of supported browsers by the Angular framework, please see:
6+
# https://angular.io/guide/browser-support
7+
8+
# You can see what browsers were selected by your queries by running:
9+
# npx browserslist
10+
11+
last 1 Chrome version
12+
last 1 Firefox version
13+
last 2 Edge major versions
14+
last 2 Safari major versions
15+
last 2 iOS major versions
16+
Firefox ESR
17+
not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
18+
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

‎.editorconfig

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

‎.gitignore

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
# Only exists if Bazel was run
8+
/bazel-out
9+
10+
# dependencies
11+
/node_modules
12+
13+
# profiling files
14+
chrome-profiler-events*.json
15+
speed-measure-plugin*.json
16+
17+
# IDEs and editors
18+
/.idea
19+
.project
20+
.classpath
21+
.c9/
22+
*.launch
23+
.settings/
24+
*.sublime-workspace
25+
26+
# IDE - VSCode
27+
.vscode/*
28+
!.vscode/settings.json
29+
!.vscode/tasks.json
30+
!.vscode/launch.json
31+
!.vscode/extensions.json
32+
.history/*
33+
34+
# misc
35+
/.sass-cache
36+
/connect.lock
37+
/coverage
38+
/libpeerconnection.log
39+
npm-debug.log
40+
yarn-error.log
41+
testem.log
42+
/typings
43+
44+
# System Files
45+
.DS_Store
46+
Thumbs.db

‎README.md

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
# AngularSearchBar
2+
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.2.3.
4+
5+
![searchbox_value](searchbox_value.png)
6+
7+
## Github API URL
8+
```
9+
https://api.github.com/
10+
```
11+
12+
##
13+
14+
```
15+
this.searchSubcription = fromEvent(this.txtField.nativeElement, 'keyup').subscribe(data => console.log(data))
16+
```
17+
18+
FromEvent method to create an observable from DOM events directly, so you have to subscribe it to get data. If you directly subscribe fromEvent data, it will return keyboardEvent value.
19+
20+
But We want the value which we are typing in the search box, so we have to transform it into the value using pipe.
21+
22+
Here is the code to get value from seach box
23+
```
24+
this.searchSubcription = fromEvent<any>(this.txtField.nativeElement, 'keyup')
25+
.pipe(
26+
map(event => event.target.value),
27+
)
28+
.subscribe(data => console.log(data));
29+
```
30+
![keyboardEvent_value](keyboardEvent_value.png)
31+
32+
Now i have to call API to get data from backend. On each keystokes i cann't hit API, so i have to use debounceTime to control API calls.
33+
The first very useful operator is debounceTime. In debounceTime, we have to pass time in milliseconds as a parameter. So, you will not get value emitted if it is within the specified time frame.
34+
35+
Here new value emits only if nothing happens for specified time frame. In our example, once the user stops writing then after 1000 milliseconds new updated value will emit.
36+
```
37+
this.searchSubcription = fromEvent<any>(this.txtField.nativeElement, 'keyup')
38+
.pipe(
39+
// Time in milliseconds between key events
40+
debounceTime(1000),
41+
map(event => event.target.value),
42+
)
43+
.subscribe(data => console.log(data));
44+
```
45+
46+
But here also one issue is there. If user writes “india” then pause so “india” value emits, then again start writing “indiapy” (adding “py” characters), and then immediately removes newly added characters (in our case “py”) and then pause, so again same value “india” emits. We can also prevent same value emitting again with RxJS distinctUntilChanged operator.
47+
48+
distinctUntilChanged() only emit when the current value is different than the last.
49+
```
50+
this.searchSubcription = fromEvent<any>(this.txtField.nativeElement, 'keyup')
51+
.pipe(
52+
// Time in milliseconds between key events
53+
debounceTime(1000),
54+
map(event => event.target.value),
55+
distinctUntilChanged()
56+
)
57+
.subscribe(data => console.log(data));
58+
```
59+
60+
## Final code using switchMap
61+
62+
```
63+
this.searchSubcription = fromEvent<any>(this.txtField.nativeElement, 'keyup')
64+
.pipe(
65+
// Time in milliseconds between key events
66+
debounceTime(1000),
67+
map(event => event.target.value),
68+
distinctUntilChanged(),
69+
switchMap(val => this.apiService.getUsersByLocation(val))
70+
)
71+
.subscribe(data => console.log(data));
72+
```
73+
74+
Let’s examine a simple scenario:
75+
76+
1. a user types ‘india’ into the input,
77+
2. switchMap operator is reached and a call to getUsersByLocation function is made with a given query string,
78+
3. a mocked request is pending,
79+
4. if a user change the input’s value to 'america' and the switchMap operator is reached while the previous request is still pending, the former request will be aborted and a new one will be processed. The previous subscription will be unsubscribed and the new one will be made,
80+
5. the value emitted by the resulting observable will be in sync with the current input’s value 'america'.
81+
82+
## switchMap
83+
84+
The switchMap() operator has three important characteristics.
85+
86+
1. It takes a function argument that returns an observable. EmployeeSearchService.search returns an observable, as other data service methods do.
87+
2. If a previous search request is still in-flight (as when the connection is poor), it cancels that request and sends a new one.
88+
3. It returns service responses in their original request order, even if the server returns them out of order.
89+
90+
## Reference URLS
91+
```
92+
https://www.youtube.com/watch?v=HfVTp4yo12A
93+
https://www.youtube.com/watch?v=ET2UPbsgPL8
94+
https://www.freakyjolly.com/angular-rxjs-debounce-time-optimize-search-for-server-response/
95+
https://stackoverflow.com/questions/42454740/angular-2-subscribing-to-observable-fromevent-error-invalid-event-target
96+
https://github.com/Rinlama/AngularTools/tree/rxjsDebounceDistinctUntilChanged
97+
https://www.freakyjolly.com/angular-rxjs-debounce-time-optimize-search-for-server-response/
98+
https://stackblitz.com/edit/angular-debounce-search?file=src%2Fapp%2Fapp.component.ts
99+
https://stackblitz.com/edit/angular-debounce-search-field?file=src%2Fapp%2Fapp.component.ts
100+
```
101+

‎angular.json

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"angular-search-bar": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/angular-search-bar",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": "src/polyfills.ts",
20+
"tsConfig": "tsconfig.app.json",
21+
"aot": true,
22+
"assets": [
23+
"src/favicon.ico",
24+
"src/assets"
25+
],
26+
"styles": [
27+
"src/styles.css"
28+
],
29+
"scripts": []
30+
},
31+
"configurations": {
32+
"production": {
33+
"fileReplacements": [
34+
{
35+
"replace": "src/environments/environment.ts",
36+
"with": "src/environments/environment.prod.ts"
37+
}
38+
],
39+
"optimization": true,
40+
"outputHashing": "all",
41+
"sourceMap": false,
42+
"extractCss": true,
43+
"namedChunks": false,
44+
"extractLicenses": true,
45+
"vendorChunk": false,
46+
"buildOptimizer": true,
47+
"budgets": [
48+
{
49+
"type": "initial",
50+
"maximumWarning": "2mb",
51+
"maximumError": "5mb"
52+
},
53+
{
54+
"type": "anyComponentStyle",
55+
"maximumWarning": "6kb",
56+
"maximumError": "10kb"
57+
}
58+
]
59+
}
60+
}
61+
},
62+
"serve": {
63+
"builder": "@angular-devkit/build-angular:dev-server",
64+
"options": {
65+
"browserTarget": "angular-search-bar:build"
66+
},
67+
"configurations": {
68+
"production": {
69+
"browserTarget": "angular-search-bar:build:production"
70+
}
71+
}
72+
},
73+
"extract-i18n": {
74+
"builder": "@angular-devkit/build-angular:extract-i18n",
75+
"options": {
76+
"browserTarget": "angular-search-bar:build"
77+
}
78+
},
79+
"test": {
80+
"builder": "@angular-devkit/build-angular:karma",
81+
"options": {
82+
"main": "src/test.ts",
83+
"polyfills": "src/polyfills.ts",
84+
"tsConfig": "tsconfig.spec.json",
85+
"karmaConfig": "karma.conf.js",
86+
"assets": [
87+
"src/favicon.ico",
88+
"src/assets"
89+
],
90+
"styles": [
91+
"src/styles.css"
92+
],
93+
"scripts": []
94+
}
95+
},
96+
"lint": {
97+
"builder": "@angular-devkit/build-angular:tslint",
98+
"options": {
99+
"tsConfig": [
100+
"tsconfig.app.json",
101+
"tsconfig.spec.json",
102+
"e2e/tsconfig.json"
103+
],
104+
"exclude": [
105+
"**/node_modules/**"
106+
]
107+
}
108+
},
109+
"e2e": {
110+
"builder": "@angular-devkit/build-angular:protractor",
111+
"options": {
112+
"protractorConfig": "e2e/protractor.conf.js",
113+
"devServerTarget": "angular-search-bar:serve"
114+
},
115+
"configurations": {
116+
"production": {
117+
"devServerTarget": "angular-search-bar:serve:production"
118+
}
119+
}
120+
}
121+
}
122+
}
123+
},
124+
"defaultProject": "angular-search-bar",
125+
"cli": {
126+
"analytics": false
127+
}
128+
}

‎e2e/protractor.conf.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// @ts-check
2+
// Protractor configuration file, see link for more information
3+
// https://github.com/angular/protractor/blob/master/lib/config.ts
4+
5+
const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
6+
7+
/**
8+
* @type { import("protractor").Config }
9+
*/
10+
exports.config = {
11+
allScriptsTimeout: 11000,
12+
specs: [
13+
'./src/**/*.e2e-spec.ts'
14+
],
15+
capabilities: {
16+
browserName: 'chrome'
17+
},
18+
directConnect: true,
19+
baseUrl: 'http://localhost:4200/',
20+
framework: 'jasmine',
21+
jasmineNodeOpts: {
22+
showColors: true,
23+
defaultTimeoutInterval: 30000,
24+
print: function() {}
25+
},
26+
onPrepare() {
27+
require('ts-node').register({
28+
project: require('path').join(__dirname, './tsconfig.json')
29+
});
30+
jasmine.getEnv().addReporter(new SpecReporter({
31+
spec: {
32+
displayStacktrace: StacktraceOption.PRETTY
33+
}
34+
}));
35+
}
36+
};

‎e2e/src/app.e2e-spec.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { AppPage } from './app.po';
2+
import { browser, logging } from 'protractor';
3+
4+
describe('workspace-project App', () => {
5+
let page: AppPage;
6+
7+
beforeEach(() => {
8+
page = new AppPage();
9+
});
10+
11+
it('should display welcome message', () => {
12+
page.navigateTo();
13+
expect(page.getTitleText()).toEqual('angular-search-bar app is running!');
14+
});
15+
16+
afterEach(async () => {
17+
// Assert that there are no errors emitted from the browser
18+
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19+
expect(logs).not.toContain(jasmine.objectContaining({
20+
level: logging.Level.SEVERE,
21+
} as logging.Entry));
22+
});
23+
});

‎e2e/src/app.po.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { browser, by, element } from 'protractor';
2+
3+
export class AppPage {
4+
navigateTo(): Promise<unknown> {
5+
return browser.get(browser.baseUrl) as Promise<unknown>;
6+
}
7+
8+
getTitleText(): Promise<string> {
9+
return element(by.css('app-root .content span')).getText() as Promise<string>;
10+
}
11+
}

0 commit comments

Comments
 (0)