mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 12:53:03 -05:00
refactor: improve code readability of challenge 38
This commit is contained in:
@@ -1,8 +1,8 @@
|
|||||||
import { Component, DestroyRef, inject } from '@angular/core';
|
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { HttpClient } from '@angular/common/http';
|
import { HttpClient } from '@angular/common/http';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { Component, DestroyRef, OnInit, inject } from '@angular/core';
|
||||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
import { Subject, concatMap, map } from 'rxjs';
|
import { Subject, concatMap, map } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@@ -11,11 +11,11 @@ import { Subject, concatMap, map } from 'rxjs';
|
|||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
template: `
|
template: `
|
||||||
<div class="form-container">
|
<div class="form-container">
|
||||||
<span
|
<span>
|
||||||
>possible values: posts, comments, albums, photos, todos, users</span
|
possible values: posts, comments, albums, photos, todos, users
|
||||||
>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<form class="form-container" (ngSubmit)="submit$$.next()">
|
<form class="form-container" (ngSubmit)="submit$.next()">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Enter text"
|
placeholder="Enter text"
|
||||||
@@ -29,20 +29,22 @@ import { Subject, concatMap, map } from 'rxjs';
|
|||||||
`,
|
`,
|
||||||
styleUrls: ['./app.component.css'],
|
styleUrls: ['./app.component.css'],
|
||||||
})
|
})
|
||||||
export class AppComponent {
|
export class AppComponent implements OnInit {
|
||||||
submit$$ = new Subject<void>();
|
submit$ = new Subject<void>();
|
||||||
input = '';
|
input = '';
|
||||||
response: unknown;
|
response: unknown;
|
||||||
|
|
||||||
private destroyRef = inject(DestroyRef);
|
private destroyRef = inject(DestroyRef);
|
||||||
constructor(private http: HttpClient) {}
|
private http = inject(HttpClient);
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.submit$$
|
this.submit$
|
||||||
.pipe(
|
.pipe(
|
||||||
map(() => this.input),
|
map(() => this.input),
|
||||||
concatMap((value) =>
|
concatMap((value) =>
|
||||||
this.http.get(`https://jsonplaceholder.typicode.com/${value}/1`)
|
this.http.get(`https://jsonplaceholder.typicode.com/${value}/1`),
|
||||||
),
|
),
|
||||||
takeUntilDestroyed(this.destroyRef)
|
takeUntilDestroyed(this.destroyRef),
|
||||||
)
|
)
|
||||||
.subscribe({
|
.subscribe({
|
||||||
next: (value) => {
|
next: (value) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user