Ngx-bootstrap modal opens twice instead of just once

I am trying to display multiple different modals on my dashboard, but I've noticed that most times the modal screen will open twice. (I am not even able to replicate this issue consistently as sometimes it does NOT open two modals after I cancel ng serve and run it again for the first time. Ng serve auto recompiling after changes will 100% always make the two modals appear).

I call the modal on a (click) function in my dashboard that looks like this

openConfigureModal(soort: string){
this.dashboardService.openConfigureModal.next(soort);

The entirety of the service is simply this

  @Injectable()
  export class DashboardService {
  constructor() { }
  openConfigureModal = new Subject();
} 

In the modalcomponent I am opening two different templates (I did this in two different components alltogether at first, the issue then arose and I figured maybe this would solve it, it did not)

export class ConfigureAppModalComponent implements OnInit {

  constructor(private dashboardService: DashboardService, private modalService: BsModalService) { }

  modalRef: BsModalRef;
  @ViewChild("templateConfigure") template;
  @ViewChild("templateSync") template2;

  ngOnInit() {
    const config = {
      class: 'modal-dialog-centered modal-lg',
    };

    const config2 = {
      class: 'modal-dialog-centered roundedborder modal-sm',
    };

    this.dashboardService.openConfigureModal.subscribe( data => {
      if(data == "google"){
        //set some values
        this.modalRef = this.modalService.show(this.template, config);
      }else if(data == "outlook"){
        //set some values
        this.modalRef = this.modalService.show(this.template, config);
      }else{
        this.modalRef = this.modalService.show(this.template2, config2);
      }
    })
  }

With the templates just looking like this

<ng-template #templateConfigure>
  <div class="modal-header">
    sth here
  </div>
  <div class="modal-body">
    sth here
  </div>
</ng-template>


<ng-template #templateSync>
  <div class="modal-header">
    sth else here
  </div>
  <div class="modal-body">
    sth else here
  </div>        
</ng-template>

I also only show the component once in my dashboard.component.html like this

<app-configureappmodal></app-configureappmodal>

Ngx-bootstrap version 2.0.2 Bootstrap version 4.0.0

Any other things not clear feel free to ask. Thank you for reading!

Fixed my own issue by simply using takeUntils and OnDestroy and properly destroying each modal in their respective .ts files :)

I'll leave the question up in case anyone runs into the same issue because I hadn't found it anywhere else before I posted this.