0

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.

enter image description here

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>
coder12346
  • 39
  • 2
  • 12

1 Answers1

2

  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>
Gunjan Kothari
  • 56
  • 2
  • Thanks for your reply... Will try out and update you. But one clarification, Will div tag fully overlay on the ion item? – coder12346 Jun 27 '20 at 14:19