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

refactor: use form, and update readme

Browse Source
This commit is contained in:
Devesh
2023-10-16 15:39:01 +05:30
parent 7e4c750613
commit 967ba0f8cd
3 changed files with 65 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/rxjs-catch-error/src/app/app.component.css Normal file
View File

@@ -0,0 +1,32 @@
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;
}
.response {
margin-left: 25%;
margin-top: 2%;
width: 50%;
text-align: center;
border: 1px solid #ccc;
}

71
apps/rxjs-catch-error/src/app/app.component.ts
View File

@@ -1,11 +1,13 @@
import { Component, ElementRef, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subscription, concatMap, fromEvent, map } from 'rxjs';
import { Component, DestroyRef, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Subject, concatMap, map } from 'rxjs';
@Component({
standalone: true,
imports: [CommonModule],
imports: [CommonModule, FormsModule],
selector: 'app-root',
template: `
<div class="form-container">
@@ -13,62 +15,31 @@ import { CommonModule } from '@angular/common';
>possible 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>
<form class="form-container" (ngSubmit)="submit$$.next()">
<input
type="text"
placeholder="Enter text"
[(ngModel)]="input"
name="action" />
<button>Fetch</button>
</form>
<div class="response">
{{ 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;
}
.response {
margin-left: 25%;
margin-top: 2%;
width: 50%;
text-align: center;
border: 1px solid #ccc;
}
`,
],
styleUrls: ['./app.component.css'],
})
export class AppComponent {
@ViewChild('buttonRef', { static: true }) buttonRef!: ElementRef;
@ViewChild('inputRef', { static: true }) inputRef!: ElementRef;
submit$$ = new Subject<void>();
input = '';
response: unknown;
private destroyRef = inject(DestroyRef);
constructor(private http: HttpClient) {}
ngOnInit() {
const buttonClick$ = fromEvent(this.buttonRef.nativeElement, 'click');
buttonClick$
this.submit$$
.pipe(
map(() => this.inputRef.nativeElement.value),
takeUntilDestroyed(this.destroyRef),
map(() => this.input),
concatMap((value) =>
this.http.get(`https://jsonplaceholder.typicode.com/${value}/1`)
)