vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-11 13:23:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: challage 38 - rxjs catch error

Browse Source
This commit is contained in:
Devesh
2023-10-14 01:24:27 +05:30
parent dc9f47e01b
commit ccb3b106dc
23 changed files with 412 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/rxjs-catch-error/src/app/app.component.spec.ts Normal file
View File

@@ -0,0 +1,8 @@
import { render } from '@testing-library/angular';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
test('...', async () => {
await render(AppComponent);
});
});

79
apps/rxjs-catch-error/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,79 @@
import { Component, ElementRef, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { concatMap, fromEvent, map } from 'rxjs';
import { CommonModule } from '@angular/common';
@Component({
standalone: true,
imports: [CommonModule],
selector: 'app-root',
template: `
<div class="form-container">
<span>Posible values: posts, comments, albums, photos, todos, users</span>
</div>
<div class="form-container">
<input #inputRef type="text" placeholder="Enter text" />
<button #buttonRef>Fetch</button>
</div>
<div class="form-container">
{{ response | json }}
</div>
`,
styles: [
`
body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.form-container {
text-align: center;
}
input {
padding: 8px;
margin-right: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
`,
],
})
export class AppComponent {
@ViewChild('buttonRef', { static: true }) buttonRef!: ElementRef;
@ViewChild('inputRef', { static: true }) inputRef!: ElementRef;
response: unknown;
constructor(private http: HttpClient) {}
ngOnInit() {
const buttonClick$ = fromEvent(this.buttonRef.nativeElement, 'click');
buttonClick$
.pipe(
map(() => this.inputRef.nativeElement.value),
concatMap((value) =>
this.http.get(`https://jsonplaceholder.typicode.com/${value}/1`)
)
)
.subscribe({
next: (value) => {
console.log(value);
this.response = value;
},
error: (error) => {
console.log(error);
this.response = error;
},
complete: () => console.log('done'),
});
}
}

6
apps/rxjs-catch-error/src/app/app.config.ts Normal file
View File

@@ -0,0 +1,6 @@
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
export const appConfig: ApplicationConfig = {
providers: [importProvidersFrom(HttpClientModule)],
};

0
apps/rxjs-catch-error/src/assets/.gitkeep Normal file
View File

BIN
apps/rxjs-catch-error/src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

13
apps/rxjs-catch-error/src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>rxjs-catch-error</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>

7
apps/rxjs-catch-error/src/main.ts Normal file
View File

@@ -0,0 +1,7 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
);

5
apps/rxjs-catch-error/src/styles.scss Normal file
View File

@@ -0,0 +1,5 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* You can add global styles to this file, and also import other style files */

2
apps/rxjs-catch-error/src/test-setup.ts Normal file
View File

@@ -0,0 +1,2 @@
import '@testing-library/jest-dom';
import 'jest-preset-angular/setup-jest';