Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67497

How to add a fading animation effect when a item is deleted in Angular?

$
0
0

This is my html file

<html>
<head>

</head>
<body>



  <button class="button1" routerLink="/home" title="Home"><span> Back</span></button> 
  <h3 class="class0">Selected Projects</h3>
  <img id="id1" src="../assets/images/cart2.jpg" title="Cart Items">




  <div class="div1">
    <table>
      <tr>
        <th>Project Name</th>
        <th>Technologies</th>
        <th>Description</th>
        <th>Sectors</th>
        <th>Preview</th>
        <th>Delete</th>
      </tr>
      <tr *ngFor="let data of selectedItem">
        <td><span [title]=data.Projectname>{{data.Projectname}}</span></td>
        <td><span [title]=data.technologies>{{data.technologies}}</span></td>
        <td><span [title]=data.projectdescription>{{data.projectdescription}}</span></td>
        <td><span [title]=data.sector>{{data.sector}}</span></td>
        <td><button id="button2" mat-button (click)="openDialog(data)"title="Preview"><img src="../assets/images/eye.png"></button>
          <td><button id="button2" type="button" title="Delete" (click)="deleteFromCart(data.id)"><img
                src="../assets/images/delete2.jpg"></button></td>
      </tr>

    </table>
  </div>
  <div class="popup-overlay" *ngIf="currentItem">

    <div class="pupup">
        <div class="title">Project Preview</div>
      <button class="order" (click)="closeDialog()"title="Close">X</button>

      <table id=table>
        <tr>
          <td>Name: </td>
          <td id=td>{{currentItem.Projectname}}</td> 
        </tr>
        <tr>
            <td>Technologies: </td>
            <td id=td>{{currentItem.technologies}}</td> 
          </tr>
          <tr>
              <td>Description : </td>
              <td id=td>{{currentItem.projectdescription}}</td> 
            </tr>
            <tr>
            <td >Sector : </td>
            <td id=td>{{currentItem.sector}}</td>
          </tr>

      </table>

    </div>
  </div>

  <!-- <div class="div2">
            <a href="#"><h4>Presentations</h4></a> 
            <a href="#"><h4>Links</h4></a> 
            <a href="#"><h4>Videos</h4></a> 

         </div> -->

</body>

</html>

This is the delete function which I have coded

export class Slide10Component implements OnInit {
  selectedItem = [];
  currentItem: any;
  dialog: any;

  constructor(private employeService: EmployeeService) { }

  ngOnInit() {
    this.getdata()
  }
  deleteFromCart(id){
    this.employeService.deleteFromCart(id).subscribe((data:any)=>{
      alert("Data deleted succefully");
      this.getdata()

    })
  }

I have just posted the partial code section from the componenet.ts file. I have added a deleteFromCart() method which does the job. I need to add a fade effect when an item is deleted from the table. Could you guys help out a fellow programmer? Thanks <3


Viewing all articles
Browse latest Browse all 67497

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>