Ionic angular multiple modal open close problem

There are three modal close itself and then open another modal from the inside of the modal

This is the structure for ion modal

<ion-modal id="last-modal" #modal_s [backdropDismiss]="false">
<ng-template>
<div class="wrapper">
<ion-item lines="none" class="offer-item ion-no-padding">
<ion-col>
<ion-label class="offer-title">{{offer.title[lg]}}</ion-label>
</ion-col>
<ion-icon
(click)="closelastModal('last-modal');"
style="color: var(--ion-color-modal-exp)"
size="small"
name="close-outline"
></ion-icon>
</ion-item>
<div
style="
display: flex;
background-color: var(--ion-color-modal-img-background);
border-radius: 16px;
margin-left: 12px;
margin-right: 12px;
align-items: center;
justify-content: center;
padding: 24px;
"
>
<ion-img
[src]="offer.img == null || offer.img.length === 0
? 'assets/images/cofee_cup.png'
: offer.img"
alt="Coffee Cup"
class="custom-card-img"
/>
</div>

<p
style="
margin-left: 12px;
margin-right: 12px;
margin-top: 8px;
color: var(--ion-color-modal-description);
"
>
{{offer.text[lg]}}
</p>
<p class="exp-date">
{{ "OFFERS.EXPIRY" | translate }} {{offer.expirationDate | date :
"MMM dd, HH:mm"}}
</p>
<ion-button
expand="block"
class="custom-button"
(click)="closelastModal('last-modal');modalService.openOfferActionModal($event, offer, 'store')"
>
<!-- (click)="closeModal();modalService.openOfferActionModal($event, offer, 'store')" -->
{{ "OFFERS.REDEEM" | translate }}
<ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
</ion-button>
</div>
</ng-template>
</ion-modal>
and then
openAnotherModal(nextModalId: string) {
const modalElement = document.getElementById(nextModalId);
modalElement?.setAttribute('is-open', 'true'); // Open the next modal
}

closeAnotherModal(modalId: string) {
const modalElement = document.getElementById(modalId);
modalElement?.setAttribute('is-open', 'false'); // Close the modal
}


here is three modal open one by another from the button of the modal itself and now I want to close the itself modal using close button and then use another button which close the self modal and open the next modal.

My problem is by using this system close and open functionality when call simultaneously then it will work but for the close button functionality not work but it work if I use modal_s.dismiss() but if once call this then next openModal will not work what should be the solution am very new in ionic platform, please help

Continue reading...