0

Hi i am using Angular8 application, in which i have used Replay subject and Behaviour subject, for the initial click it hits the api for only 1 time, but if i change between tabs, the subscription hits fr multiple times, if i have clicked tab for 3 times, the API gets hitted for 6 times, so it starts multiplying, is there any way to unsubscribe the behavious subject, i want the API to hit only one time, i tried with unsubscribing, but it didnt work.

TS: App.component.ts:

_otherTab: ReplaySubject<any> = new ReplaySubject();

  other() {
      this.othertab = 2;
      this._otherTab.next(2); 
  }

HTML:

  <div class="card-header bg-dark border-bottom-0">
                    <ul class="nav nav-tabs nav-fill card-header-tabs" id="" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#basic" role="tab">User</a>
                        </li>
                        <li class="nav-item" (click)="other()">
                            <a data-toggle="tab" href="#eo" role="tab" 
                            [ngClass]=" {'nav-link':(true),'disabled' : (_otherTabEnabled === false) }" >Other</a>
                        </li>
                    </ul>
                </div>

  <div class="tab-pane" id="eo" role="tabpanel">
   <app-other-table [othertab]="_otherTab"></app-other-table>
   </div>

Other Component:

 @Input() othertab: BehaviorSubject<any>;
     ngOnInit() {
        this.othertab.subscribe(val => {
          if (val) {
            this.showTab = true;
          }
        });
      }

Demo

Bhrungarajni
  • 2,415
  • 11
  • 44
  • 88

1 Answers1

0

in your Other component, where you subscribe, you must remember to unsubscribe. Otherwise you can have memory leak issues etc.

So where you have the subscribe, remember to unsubscribe.

 subs;
 @Input() othertab: BehaviorSubject<any>;

     ngOnInit() {
        this.subs = this.othertab.subscribe(val => {
          if (val) {
            this.showTab = true;
          }
        });
      }

    ngOnDestroy(){
        this.subs.unsubscribe();
    }
PMO1948
  • 2,210
  • 11
  • 34
  • what exactly is the api that is getting hit multiple times? I have run your code and have been unable to discern this – PMO1948 Dec 24 '20 at 08:00
  • in my application, if i click other tab for first time, this subscribe will hit one time, if i change tab and come to same tab, then the val will be hitting multiple times – Bhrungarajni Dec 24 '20 at 08:03
  • so the API inisde ngOnit will hit multiple times – Bhrungarajni Dec 24 '20 at 08:04
  • using the following stackblitz, forked from yours, I logged the different situations (ngOnInit, subscribe, etc) and they are not called more than once. If there are not the right places, please point me in the direction of the right ones https://stackblitz.com/edit/github-ck3u8u-f6gr5w?file=src%2Fapp%2Fother-table%2Fother-table.component.ts – PMO1948 Dec 24 '20 at 08:11
  • ya with Demo i created it is hitting only one, but in my application that is hitting multiple times, let me create new demo and try to reproduce issue what i am facing in my actual application – Bhrungarajni Dec 24 '20 at 08:17
  • i am not able to reproduce same issue here, but in my application it is triggering multiple times – Bhrungarajni Dec 24 '20 at 08:32
  • https://stackblitz.com/edit/github-ck3u8u-wrnsis?file=src%2Fapp%2Fother-table%2Fother-table.component.ts my code is something like this in my application – Bhrungarajni Dec 24 '20 at 08:38
  • the new stackblitz has many many errors... check the console – PMO1948 Dec 24 '20 at 08:45
  • ya but that is similar to my application code,but in stackblitz its showing error – Bhrungarajni Dec 24 '20 at 08:51