title: Why my subject observable subscriber is calling multiple times in angular?
body: <p>In angular i have a service like this</p>
  
  <pre><code>  private subject = new Subject&lt;any&gt;();
    private  vehicleSubject = new Subject&lt;any&gt;();
  
    sendData = (data: any) =&gt; this.subject.next({ data });
  
    sendVehicleData = (data: any) =&gt; this.vehicleSubject.next({ data });
  
    getData = (): Observable&lt;any&gt; =&gt; this.subject.asObservable();
  
    getVehicleData = (): Observable&lt;any&gt; =&gt; this.vehicleSubject.asObservable();
  </code></pre>
  
  <p>Now i have my <code>sidebar(parent)</code> component like this with <code>tab view</code> both of <code>primeng</code> in my <code>sidebar.component.html</code></p>
  
  <p>
      
      {{user?.fullName}}</p>
      
          
              
                  
              
          
          
              
                  
              
          
          
              
                  Services &amp; Inspections&lt;/h3> -->
                  
              
          
          
              
                  Inspection works&lt;/h3> -->
                  
              
          
      </p>
  
  <p></p>
  
  <p>in my <code>sidebar.component.ts</code> when <code>sidebar</code> is opened and user click on outside of <code>sidebar</code> so i will pas data to my child component like this</p>
  
  <pre><code>  onSidebarOutside(e) {
     if (this.index === 0 &amp;&amp; this.sideBarVisible &amp;&amp; 
       !this.isCustomerCancelBtnClicked) {
       e.target.value = true;
       this.verifyCustomer = e;
    } else if(this.index === 1){
        console.log('in index 1');
        this.dataService.sendVehicleData(true);
    }
    if (this.isCustomerCancelBtnClicked) {
      this.isCustomerCancelBtnClicked = false;
     }
    }
  </code></pre>
  
  <p>Inside my <code>vehicle-side-list.component</code> i have a subscriber in <code>ngOnInit</code> to get data like this</p>
  
  <pre><code>ngOnInit() {
     this.dataService.getVehicleData().subscribe(obj =&gt; {
       console.log('in vehicle item subscruber', obj);
      });
  }
  </code></pre>
  
  <p>but problem is this that subscriber inside my <code>vehicle-side-list.component</code> called multiple times and i got this log <code>console.log('in vehicle item subscruber', obj);</code> multiple times. I am noet getting that why is it calling multiple times. I am sending value only once and by sending value from <code>sidebar</code> component it is calling multiple times.</p>
  
  <p>My component calling structure is like this</p>
  
  <pre><code>sidebar
    -customer-component
      -appointment-component
    -vehicle-component
      -appointment-component
    -inspection-component
      -appointment-component
  </code></pre>
  
  <p>And i want to pass data from <code>sidebar</code> to <code>appointment-component</code></p>
  
  <p>What am i doing wrong here?</p>