title: Angular 4 Subscribe method call multiple times
body: <p>im creating a global modal component.
  My problem is when i call the subscribe method it call multiple times base on the number of the modal was called.
  How can i prevent mutiple calls on observable subscribe method? Please check my code below. Thanks in advance.</p>
  
  <p><strong>modal.model.ts</strong></p>
  
  <pre><code>export class Modal {
    title: string;
    message: string;
    visible: boolean = false;
  }
  </code></pre>
  
  <p><strong>modal.service</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Modal } from './modal.model';
  import { Observable } from 'rxjs';
  import { Subject } from 'rxjs/Subject';
  
  @Injectable()
  export class ModalService {
    static readonly YES = 1;
    static readonly NO = 0;
  
    private modal = new Modal();
    private subject = new Subject&lt;Modal&gt;();
    private action = new Subject&lt;number&gt;();
  
    confirmationDialog(message) {
      this.modal.title = 'Confirmation';
      this.modal.message = message;
      return this;
    }
  
    show() {
      this.modal.visible = true;
      this.setModal(this.modal);
      return this;
    }
  
    setAction(action: number) {
      this.action.next(&lt;number&gt;action);
    }
  
    getAction(): Observable&lt;any&gt; {
      return this.action.asObservable();
    }
  
    setModal(alert: Modal) {
      this.subject.next(&lt;Modal&gt;alert);
      return this;
    }
  
    getModal(): Observable&lt;any&gt; {
      return this.subject.asObservable();
    }
  }
  </code></pre>
  
  <p><strong>modal.component</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ModalService } from './modal.service';
  import { Modal } from './modal.model';
  
  @Component({
    selector: 'modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.css']
  })
  export class ModalComponent implements OnInit {
    public modal: Modal;
  
    constructor(private modalService: ModalService){}
  
    ngOnInit() {
      this.modalService.getModal().subscribe((modal: Modal) =&gt; {
        this.modal = modal;
        console.log(modal);
      });
    }
  
    no() {
      this.modalService.setAction(0);
      this.modalService.close();
    }
  
    yes() {
      this.modalService.setAction(1);
      this.modalService.close();
    }
  }
  </code></pre>
  
  <p><strong>calling the modal component</strong></p>
  
  <pre><code>showModal() {
    this.modalService.confirmationDialog('Are you sure you want to save this record?').show();
    this.modalService.getAction().subscribe(response =&gt; {
      if(response === ModalService.NO) {
        return;
      }
      console.log('call mutiple times');
    });
  }
  </code></pre>
  
  <p>Here is the screenshot of the output on the console log.
  <a href="https://i.stack.imgur.com/ZT2kb.png" rel="noreferrer">console log output</a></p>