Why can't I close an Ionic modal when using more than one? (Angular)

Question

I'm building an Angular app using Ionic. The goal of the app is to keep track of your expenses and to be able to know how much money you have on each of your different accounts. I am using an ion-fab-list to show the different buttons both for adding a transaction and for adding a new bank account. These buttons open different ion-modals. I've already gotten the modal for adding a new transaction to work. However, when I try to add the one for adding a new account I just can´t dismiss the other modal anymore.

This is the HTML (the modal for adding transactions isn't complete since it's pretty long and anything after that can't be causing the issue)

      <ion-fab horizontal="end" vertical="bottom" slot="fixed">

        <ion-fab-button color="primary" class="">
          <ion-icon name="add"></ion-icon>
        </ion-fab-button>

        <ion-fab-list side="top">

          <ion-fab-button id="add-transaction" expand="block" color="primary" data-desc="Add transaction">
            <ion-icon name="receipt-outline"></ion-icon>
          </ion-fab-button>

          <ion-fab-button id="add-account" expand="block" color="primary" data-desc="Add account">
            <ion-icon name="card-outline"></ion-icon>
          </ion-fab-button>

        </ion-fab-list>
      </ion-fab>

      <ion-modal trigger="add-account">
        <ng-template>
          <ion-header>
            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-button (click)="cancel_account()">Cancel</ion-button>
              </ion-buttons>
              <ion-title>Welcome</ion-title>
              <ion-buttons slot="end">
                <ion-button (click)="confirm_account()" [strong]="true">Confirm</ion-button>
              </ion-buttons>
            </ion-toolbar>
          </ion-header>
        </ng-template>
      </ion-modal>
      
      <ion-modal trigger="add-transaction">
        <ng-template>
          <ion-header>
            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-button (click)="cancel_transaction()">Cancel</ion-button>
              </ion-buttons>
              <ion-buttons slot="end">
                <ion-button (click)="confirm_transaction()" [strong]="true">Confirm</ion-button>
              </ion-buttons>
            </ion-toolbar>
          </ion-header>
          <ion-content class="ion-padding">

And here's the Typescript (ignore the first 4 rows of the confirm-transaction function since it's only relevant to send the new transactions to the database.)

  @ViewChild(IonModal) modal: IonModal;

  cancel_transaction(){
    this.modal.dismiss('cancel');
  }

  cancel_account() {
    this.modal.dismiss('cancel');
  }

  async confirm_transaction() {
    await this.transactionService.addTransactions(this.new_transaction)
    this.getTransactions()
    this.getAccounts();
    this.modal.dismiss('confirm');
  }

I have already tried changing @ViewChild to @ViewChildren as I saw someone suggested in a similar question but it still didn't work. Also, the reason why there's two identical functions for dismissing the modals is because I thought using the same function for both modals was what could be causing this but the issue persisted. Whenever i try to close the modal for adding a transaction it just doesn't work.

Answer 1

Each modal needs its own role (id) and that is then passed to the dismiss method. Like so:

this.modal.dismiss('confirm', 'modal1');

https://ionicframework.com/docs/api/modal#dismiss