SwitchMap usage onTabSelect

Question

Below is my code, when user selects tab, I want to cancel the existing call and load the tab details which user clicks.

I understand I have to use switchmap(guide me if it is not right or better alternative)

I follow this example and it didnot work for me as the id has Valuechanges property switchmap example

onTabSelect(event: MatTabChangeEvent) {
this.categoryId = this.sections[event.index].categoryId;
this.designService.getDesignsByCategoryId(this.categoryId)
.subscribe(
   (design: any[]) => {
     this.designs = design;
     this.designsCount = design.length + ' Designs';
     this.designsLoaded = true;
  },
   error => (this.errorMessage = error)
 );
}

Dilani Alwis · Answer 1 · 2019-04-07T04:33:15.397

app.component.html

click event will emit the button I have selected in each button click.

<div class="tab">
  <button style="height: 50px; width: 100px;" class="tablinks" (click)="tabclickSubject.next(1)">topfunky</button>
  <button style="height: 50px; width: 100px;" class="tablinks" (click)="tabclickSubject.next(2)">roland</button>
  <button style="height: 50px; width: 100px;" class="tablinks" (click)="tabclickSubject.next(3)">lukas</button>
</div>

<div class="tabcontent">
  <h3>{{user.name}}</h3>
  <p>{{user.location}}</p>
</div>

app.component.ts

Declared a subject to subscribe to the button clicks. debounceTime is set to 500ms which will wait for 500ms before emitting the selected option

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject, Observable, Subscription } from 'rxjs';
import { switchMap, debounceTime } from 'rxjs/operators';
import { User } from './models/user';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, OnDestroy {
  user: User;
  tabclickSubject = new Subject();
  subscription: Subscription;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getUser('topfunky').subscribe(
      user => {
        this.user = user;
      }
    );

    this.subscribeToButtonClick();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  subscribeToButtonClick() {
    this.subscription = this.tabclickSubject.pipe(
      debounceTime(500),
      switchMap(option => {
        if (option === 1) {
          return this.getUser('topfunky');
        } else if (option === 2) {
          return this.getUser('roland');
        } else {
          return this.getUser('lukas');
        }
      })
    ).subscribe(reponse => {
      this.user = reponse;
    });
  }

  getUser(name: string): Observable<User> {
    return this.http.get<User>('https://api.github.com/users/' + name);
  }
}

I tried your answer but it is not working in my case. The reason being, I am not loading data on pageonit, my first and subsequent data loads on only one method which in onTabSelect(The code which I posted above). subscribeToButtonClick in PageOnit is very confusing to me. Do I need to put this line in pageonit ? — Chatra, Apr 06 '19 at 20:25
I have used an observable which will emit value when the button click is happened, to which i can subscribe later on to receive the latest value each time a button is clicked. In order to get value from the button click I have to keep on listening to it, that is what done in subscribeToButtonClick. And by calling it from PageOnit I have started listening to after the component is created. And I will keep on listening until the component gets destroyed — Dilani Alwis, Apr 07 '19 at 04:54

SwitchMap usage onTabSelect

1 Answers1