How to set loading to false or true for each item in the rxjs angular?

Question

this is in my component for select item

this.test = this.string$.pip(
switchMap(() => {
  return this.list.checkBox(data)
})

this.test.subscribe((res) => {

}, (err) => {
  item.status = false
}

this.string.next(date);

i want to add loading for each item, for example i have list of data that i want when we have post request set loading just for that item, i test it with writing in the switchmap but it set for all items, or in the tap after and before switchmap like this following code but not worked

this.test = this.string$.pip(
tap(() => this.loading =true),
switchMap(() => {
  return this.list.checkBox(data)
}),
tap(() => this.loading = false
)
 

Answer 1

I would recommend to create an item component in which you can hold the state for each item.

Example:

// Parent html
<app-item *ngFor="let item of ['A', 'B', 'C']" [item]="item"></app-item>

// child component
export class ItemComponent {

  @Input()
  item: string;

  pending$ = new BehaviorSubject(false);

  constructor(private myAsyncService: MyAsyncService) {}

  onClick() {
    this.pending$.next(true);

    this.myAsyncService.getData().pipe(
      take(1),
    ).subscribe(
      () => this.pending$.next(false),
    );
  }
}

// child html
<button (click)="onClick()" [ngClass]="{ pending: pending$ | async }">{{ item }}</button>

// child css
.pending {
  background-color: red
}

// the service
getData(): Observable<number> {
    return timer(2000);
  }

In this example each button turns red for 2 seconds individually.

See Stackblitz https://stackblitz.com/edit/angular-14xsoe?file=src/app/my-async.service.ts

Answer 2

It would have been better if you would created a sample on stackblitz. This way it would be easier to identify problem and provide a solution. More importantly many things are unclear from the post.

1. Are you trying to load each individual data asynchronously?
2. Where are are trying to show the loader? Is it within the data item of list or is it a common loader?
3. Are you trying to show loader at the time of rendering or a loader while the data is being loaded from server.

Another point switchMap operator might not work here as it is purpose to cancel previous subscription and emit data from the latest. I hope this helps in articulating and presenting problem in a better way.