0

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.

Improve this question
2
  • have you tried using modalController instead of inline? that'd be my first instinct. Commented Jan 31, 2023 at 14:27
  • Hey! Thanks, did this and it worked. Apparently by default, the modal controller attempts to close the most recently created modal. So when using modalController and creating an html and a .ts for each modal it works Commented Feb 1, 2023 at 3:43

2 Answers 2

Reset to default
0

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Tried doing this but it still doesn't work. It's weird because the cancel button works for one of them and I'm using the exact same code for the one that doesn't work. Whenever I delete the new modal the modal for adding transactions works. I'm totally lost as to what to do
-1

This is an example on how to close two different Ionic modals. Your coding may differ. 

import { Component, ViewChild } from '@angular/core'; @Component({ selector: 'your-component', templateUrl: 'your-component.component.html', }) export class YourComponent { @ViewChild('addTransactionModal') addTransactionModal: any; @ViewChild('addAccountModal') addAccountModal: any; constructor() {} async dismissModal() { await this.addAccountModal.dismiss(); } async dismissModal2() { await this.addTransactionModal.dismiss(); } }
<ion-button id="openAddTransactionModal">Add Transaction</ion-button> <ion-button id="openAddAccountModal">Add Account</ion-button> <ion-modal trigger="openAddTransactionModal" #addTransactionModal> <ng-template> <ion-header> <ion-toolbar> <ion-title> Add Transaction </ion-title> <ion-buttons slot="end"> <ion-button (click)="dismissModal2()">Close</ion-button> </ion-buttons> </ion-toolbar> </ion-header> <ion-content> <!-- Content for adding transaction goes here --> </ion-content> </ng-template> </ion-modal> <ion-modal trigger="openAddAccountModal" #addAccountModal> <ng-template> <ion-header> <ion-toolbar> <ion-title> Add Account </ion-title> <ion-buttons slot="end"> <ion-button (click)="dismissModal()">Close</ion-button> </ion-buttons> </ion-toolbar> </ion-header> <ion-content> <!-- Content for adding account goes here --> </ion-content> </ng-template> </ion-modal>

Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.