Apologies for the vague title, but I'm facing an issue with creating a single modal to display data from multiple clickable elements, rather than having separate modals for each element. For example, when I click on item 1, its data should be shown in the modal, and then when I click on item 2, the same modal should dynamically display its data. I tried modifying the modal trigger ID to a class, but that didn't work. Can anyone provide guidance or suggestions on how to achieve this functionality?
Thank you in advance!
list-details.component.html
<ion-list>
<ng-container *ngFor="let item of myList">
<ion-item detail="true">
<ion-button id="open-modal" expand="block" (click)="getItem(item)">
<ion-label>
<h2 class="headline">{{item.beer}}</h2>
<h3 class="sub-headline">{{item.name}}</h3>
<p>{{item.notes}}</p>
<p>{{item.price | currency}}</p>
<app-rating [rating]="item.rating"></app-rating>
</ion-label>
</ion-button>
</ion-item>
</ng-container>
</ion-list>
<ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="cancel()">Cancel</ion-button>
</ion-buttons>
<ion-title>{{user.name}}</ion-title>
<ion-buttons slot="end">
<ion-button (click)="confirm()" [strong]="true">Confirm</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-item>
<ion-label position="stacked">Enter your name</ion-label>
<ion-input type="text" placeholder="Your name" [(ngModel)]="name"></ion-input>
</ion-item>
</ion-content>
</ng-template>
</ion-modal>
list-details.component.ts
export class ListDetailsComponent implements OnInit {
@ViewChild(IonModal) modal: IonModal;
message = 'This modal example uses triggers to automatically open a modal when the button is clicked.';
name: string;
user: any;
constructor() { }
ngOnInit() {
}
getItem(item: any){
this.user = item;
}
cancel() {
this.modal.dismiss(null, 'cancel');
}
confirm() {
this.modal.dismiss(this.name, 'confirm');
}
onWillDismiss(event: Event) {
const ev = event as CustomEvent<OverlayEventDetail<string>>;
if (ev.detail.role === 'confirm') {
this.message = `Hello, ${ev.detail.data}!`;
}
}
}