test #2

src/app/app.component.html

@@ -1,7 +1,9 @@
-<select [formControl]="control">
-  <option *ngFor="let option of options" [value]="">{{ option }}</option>
-</select>
-
+<input type="number" [formControl]="control"/>
 <div>card</div>
+<div *ngFor="let card of cards">
+  {{ card.type }}
+  {{ card.name }}
+  {{ card.id }}
+</div>
 
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { CardType, DataService } from './data.service';
+import { Card, DataService } from './data.service';
+import { catchError, concatMap, EMPTY, map } from "rxjs";
 
 
 @Component({
@@ -9,8 +10,21 @@ import { CardType, DataService } from './data.service';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  readonly options: CardType[] = ['KEK', 'OMEGA', 'PEPEGA', 'OMEGA'];
-  readonly control = new FormControl(this.options[0]);
+  readonly control = new FormControl();
+  cards: Card[] = [];
+
+  cards$ = this.control.valueChanges
+    .pipe(concatMap((controlValue) => this.dataService.getCard(controlValue)
+        .pipe(
+          map((card) => {
+            this.cards.push(card);
+            }
+          )
+        ).pipe(
+          // catchError([])
+        )
+      )
+    ).subscribe();
 
   constructor(
     private dataService: DataService,
@@ -20,9 +34,9 @@ export class AppComponent {
 
 
   /*
-  *
-  * Get data on user select input, filter data by "CardType"
-  * Show name, and ID on card template of filtered items
-  *
+  * On user input number(N) request Cards from id starts from 1 to N
+  * Show all responded Cards in template in the same time
+  * Keep the cards in order 1 to N
+  * Skip cards with error response
   * */
 }

src/app/data.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
+import { delay, Observable, of, throwError } from 'rxjs';
 
 export type CardType = 'KEK' | 'ЧЕБУРРЕК' | 'PEPEGA' | 'OMEGA';
 
@@ -8,31 +8,28 @@ export interface Card {
   id: number;
   type: CardType;
 }
+const cardsById = new Map<number, Card>([
+  [1, {name: 'One', id: 1, type: 'ЧЕБУРРЕК'}],
+  [2, {name: 'Two', id: 2, type: 'KEK'}],
+  [3, {name: 'Three', id: 3, type: 'OMEGA'}],
+  [6, {name: 'Six', id: 6, type: 'PEPEGA'}],
+  [9, {name: 'Nine', id: 9, type: 'KEK'}],
+  [12, {name: 'Twelve', id: 12, type: 'OMEGA'}],
+])
+
 
 @Injectable({ providedIn: 'root' })
 export class DataService {
-  getData(): Observable<Card[]> {
-    return of([
-      {
-        name: 'One',
-        id: 1,
-        type: 'PEPEGA',
-      },
-      {
-        name: 'Three',
-        id: 3,
-        type: 'KEK',
-      },
-      {
-        name: 'Two',
-        id: 2,
-        type: 'ЧЕБУРРЕК',
-      },
-      {
-        name: 'Five',
-        id: 5,
-        type: 'ЧЕБУРРЕК',
-      },
-    ]);
+
+  getCard(id: number): Observable<Card> {
+    const card = cardsById.get(id);
+
+    if (card) {
+      return of(card).pipe(
+        delay(Math.random() * 2000),
+      );
+    } else {
+      return throwError(() => `[404] Card with ID: ${id} not found`);
+    }
   }
 }