title: Angular 6 Dropdown inside Material Tabs Error
body: <p>I have an input drop-down component which is used in multiple places in the same app but in different tabs.</p>
  
  <p>The issue I am facing is when I select a value from the drop-down in Tab 1 and an API call is done with the value, the same component in Tab 2 also does that with the selected value in Tab1.</p>
  
  <p>How do I fix this as I am subscribing to the same service in the different tabs?</p>
  
  <pre><code>&lt;ng-select 
    [items]="Groups"
    [virtualScroll]="true"
    bindLabel="bg_desc"
    bindValue="bg_desc"
    placeholder="Groups"
    [(ngModel)]="selectedGroup"
    [clearable]="false"
    (change)="selectGroups()"&gt;
    &lt;ng-template 
      ng-notfound-tmp 
      let-searchTerm="searchTerm"&gt;
      &lt;div class="ng-option disabled"&gt;
        No data found for "{{searchTerm}}"
      &lt;/div&gt;
    &lt;/ng-template&gt;
    &lt;ng-template 
      ng-option-tmp 
      let-item="item" 
      let-search="searchTerm"&gt;
      &lt;div 
        [ngOptionHighlight]="search" 
        class="text-uppercase"&gt;
        {{item.bg_desc}}
      &lt;/div&gt;
    &lt;/ng-template&gt;
  &lt;/ng-select&gt;
  </code></pre>
  
  <p>This is in my component:</p>
  
  <pre><code>selectGroups() {
    this._data.changeGroup(this.selectedGroup);
  }
  </code></pre>
  
  <p>This is my service:</p>
  
  <pre><code>changeGroup(bg: string) {
    this.changeGroupData.next(bg);
  }
  
  private changeGroupData = new BehaviorSubject&lt;string&gt;('');
  currentChangeGroupData = this.changeGroupData.asObservable();
  </code></pre>
  
  <p>This is my stackbliz example: <a href="https://stackblitz.com/edit/angular-1oucud" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-1oucud</a></p>
  
  <p>I want individual calls on these tabs. Should I create three instances of same component with different names to achieve this?</p>