title: Angular 6 subscription invoke multiple times
body: <p>I just working on a new Angular 6 WebApp which the whole communication between the components is based on Subjects and Subscriptions.</p>
  
  <p>The whole subscription is implemented in the dashboard component (level 1 under the root). On the Dashboard, the component is a table generated from the C# ASP.NET Core Backend with SignalR web sockets.</p>
  
  <p>Now we implemented edit and delete buttons for each row in this table.
  The edit button opens an ngx-bootstrap Modal. The Modal opening function takes a single row of information in the param.</p>
  
  <p>Inside this "edit-modal" are some inputs with the date of the row. Now when I save the changes, the data is sent back to the dashboard component which invokes an update method for the row with the .NET Core API. </p>
  
  <p>During this data stream between the edit modal and the dashboard, my subscription invokes 4x times.</p>
  
  <p>I have tried to debug this but don't find any clue what is going on here...</p>
  
  <p>My Service for Communication:</p>
  
  <pre><code>export class CommunicationService {
  
    private subject = new Subject&lt;any&gt;();
  
    constructor() { }
  
    sendData(data: any) {
      this.subject.next({ data });
    }
  
    removeData() {
      this.subject.next();
    }
  
    getData(): Observable&lt;any&gt; {
      return this.subject.asObservable();
    }
  
  }
  </code></pre>
  
  <p>Edit Modal:</p>
  
  <pre><code>sendOrderToDashboard(): void {
      // this.order is a data of singel row. Its a table with different user orders as a row.
      this.communicationService.sendData(this.order);
      this.modalRef.hide();
    }
  </code></pre>
  
  <p>Dashboard Component</p>
  
  <pre><code>public ngOnInit(): void {
      this.communicationService.getData().subscribe(orderToUpdate =&gt; {
        if (orderToUpdate) {
          this.updateOrder(orderToUpdate.data);
          console.log(orderToUpdate.data);
          // this log invokes 4x times
        }
      });
    }
  
  updateOrder(order): void {
      this.orderService.updateOrder(order).subscribe(next =&gt; {
        console.log('updated successfully');
        // This log is never executed even when the update is successful
      }, error =&gt; {
        console.log('error while updating order');
      });
    }
  </code></pre>
  
  <p>Update order in the OrderService (Bridge between Angular and SignalR (Backend))</p>
  
  <pre><code>  public updateOrder(order: Order): Observable&lt;Order&gt; {
      if (!this.orderSubjects[order.id]) {
        this.orderSubjects[order.id] = new Subject&lt;Order&gt;();
      }
  
      this.hubService.invoke(ServerMethod.UpdateOrder, order);
  
      return this.orderSubjects[order.id].asObservable();
    }
  </code></pre>
  
  <p>Have anybody a clue why my success log never executed and my its invokes 4x times?</p>