如何在 Ionic 4 中的 ion-item 上叠加文本

Question

I have a list as shown in the below image. As i click on the plus icon on each item,i will be calling a rest api to update the database. As i get a response, i want to overlay a success text message with transparent black background for few seconds as shown in the image.

Could anyone please guide me on how to achieve this? Can we use css or any angular material to achieve this?

below is the code.

<ion-card *ngFor="let item of items">
    <ion-row>
      <ion-col size="3">
        <ion-img width="80" height="80" [src]="item.imagePath"></ion-img>
      </ion-col>
      <ion-col size="7" >
       <ion-label class="item-name">item.name</ion-label>
       <ion-label class="item-price">item.cost</ion-label>
       <ion-label class="item-date">item.date</ion-label>        
      </ion-col>
      <ion-col size="2">
       <ion-icon class="select-icon" name="add-circle"></ion-icon>
      </ion-col>
    </ion-row>
   </ion-card>

Answer 1

 add(item) { item.showMessage = true; setTimeout(() => { delete item.showMessage; }, 3000); }

 .success-message { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: none; justify-content: center; align-items: center; background: rgba(00,00,00,0.7); z-index: 1; } ion-card.showMessage {.success-message { display: flex; } }

 <ion-card *ngFor="let item of items" [class.showMessage]="item?.showMessage"> <div class="success-message">Added to your coupon list.</div> <ion-row> <ion-col size="3"> <ion-img width="80" height="80" [src]="item.imagePath"></ion-img> </ion-col> <ion-col size="7" > <ion-label class="item-name">item.name</ion-label> <ion-label class="item-price">item.cost</ion-label> <ion-label class="item-date">item.date</ion-label> </ion-col> <ion-col size="2"> <ion-icon class="select-icon" name="add-circle" (click)="add(item)"></ion-icon> </ion-col> </ion-row> </ion-card>