How can I NOT wait for both observables to come and use data of 1 observable in swtichmap?

Question

In this code below , I want student list to be rendered immediately and not wait for the second observable , but when second observable comes , it should check that student is not enrolled in all courses and then enable the button to add to course.

https://stackblitz.com/edit/angular-ivy-trnr9r?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2FdummyApi.ts,src%2Fapp%2Fapp.module.ts

Answer 1

You need to first create a behaviour subject, the special property of behaviour subject is we can have a initialization value. Then when each api call completes we can update the subject with the latest value.

Learn more about behaviour subject

html

<div class="container">
  <div class="list" *ngIf="studentDataSubject | async as studentData">
    <div *ngFor="let student of studentData">
      <div>{{ student.name }}</div>
      <button class="btn" [disabled]="student.enable">Add to course</button>
    </div>
  </div>

  <div class="list" *ngIf="courseDataList | async as courseData">
    <div *ngFor="let course of courseData">
      <div>{{ course.name }}</div>
    </div>
  </div>
</div>

ts

import { Component, OnInit, VERSION } from '@angular/core';
import { BehaviorSubject, map, Observable, switchMap, tap } from 'rxjs';
import {
  IStudentData,
  getStudentList,
  ICourseData,
  getCourseList,
} from './dummyApi';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  studentDataSubject: BehaviorSubject<any> = new BehaviorSubject<any>([]);
  name = 'Angular ' + VERSION.major;

  studentDataList: Observable<IStudentData[]> = getStudentList(); // no delay
  courseDataList: Observable<ICourseData[]> = getCourseList(); // data comes after 3 seconds

  ngOnInit() {
    this.studentDataList
      .pipe(
        switchMap((studentData) => {
          this.studentDataSubject.next(studentData);
          return this.courseDataList.pipe(
            tap((courseData) => {
              const newStudentData = studentData.map((student) => {
                let dummyStudentObj = {
                  ...student,
                  enable: student.courseCount < courseData.length,
                };
                return dummyStudentObj;
              });
              this.studentDataSubject.next(newStudentData);
            })
          );
        })
      )
      .subscribe();
  }
}

forked stackblitz

Answer 2

studentDataList.pipe(switchMap(...courseDataList...))

to

courseDataList.pipe(switchMap(...studentDataList...))

ts

export class AppComponent {
  name = 'Angular ' + VERSION.major;

  studentDataList: Observable<IStudentData[]> = getStudentList(); // no delay
  courseDataList: Observable<ICourseData[]> = getCourseList(); // data comes after 3 seconds

  resultData = this.courseDataList.pipe(
    map(({length}) => length),
    // startWith(Infinity),
    switchMap((len) => this.studentDataByLength(len))
  );

  studentDataByLength(length: number){
    return this.studentDataList.pipe(
      map((datas) => datas.map((d) => ({...d, enable: d.courseCount < length})))
    );
  }

  ngOnInit() { }
}

html

<div class="container">
  <div class="list" *ngIf="resultData | async as studentData">
    <div *ngFor="let student of studentData">
      <div>{{ student.name }}</div>
      <button class="btn" [disabled]="student.enable">Add to course</button>
    </div>
  </div>

  <div class="list" *ngIf="courseDataList | async as courseData">
    <div *ngFor="let course of courseData">
      <div>{{ course.name }}</div>
    </div>
  </div>
</div>