Angular material mat-table selected row delete-CodePudding

I want to delete the angular matte table selected row, can you help with that?

CodePudding user response：

This is one way to achieve what you want,

Save the index of the row.
When delete is clicked splice the data source and re-render the rows.

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;

  selectedItemIdx = null;

  @ViewChild(MatTable) table:MatTable<any>

  rowSelected(selectedItemIdx) {
    this.selectedItemIdx = selectedItemIdx;
  }

  deleteSelected() {
    this.dataSource.splice(this.selectedItemIdx, 1);
    this.table.renderRows()
    this.selectedItemIdx = null;
  }
}

<table mat-table [dataSource]="dataSource" >
  ...
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index" (click)=rowSelected(i) [ngClass]="{'highlight': i === selectedItemIdx}"></tr>
</table>


<button (click)="deleteSelected()">Delete</button>

.highlight {
  background-color: yellow;
}

CodePudding user response：

enter image description here

import { SelectionModel } from '@angular/cdk/collections';
import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import { Observable } from 'rxjs';
import { WebApiService } from 'src/app/service/web-api.service';
import { __values } from 'tslib';
import { StokKayitComponent } from './dialog/stok-kayit/stok-kayit.component';

@Component({
  selector: 'app-stok',
  templateUrl: './stok.component.html',
  styleUrls: ['./stok.component.css']  
})
export class StokComponent implements OnInit
{
  stokList!:Observable<any[]>; 
  
  displayedColumns: string[] = ['id','grupKodu', 'sicilKodu', 'sicilAdi','action'];
  dataSource!: MatTableDataSource<any>;
  selection = new SelectionModel<Element>(true, []);
  element:any;
  selectedItemIdx = null;

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;
  @ViewChild(MatTable) table!: MatTable<any>;
  
  rowSelected(selectedItemIdx: null) {
    this.selectedItemIdx = selectedItemIdx;
  }
  
  deleteSelected() 
  {
    this.element.splice(this.selectedItemIdx, 1);
    this.table.renderRows()
    this.selectedItemIdx = null;
  }

  
  @HostListener('window:keyup.esc') onKeyUp() {this.dialog.closeAll();}  // ESC tuşu ile sayfadan çıkış yapar.

  // Yabancı anahtarlarla ilişkili verileri görüntülemek için harita
  stokListMap:Map<number, string> = new Map();  
  clickedRows = new Set<PeriodicWave>();    
  
  
  constructor(private service:WebApiService, public dialog:MatDialog) { }

  openDialog(): void // dialog stok kayıt formuna gider. 
  {
    this.dialog.open (StokKayitComponent, 
      {
        autoFocus:false,
        width:'1200px',
        height:'750px',
        panelClass:"custom", // MAT-DIALOG border-radius ayarları.
        disableClose:true, //Diyalog alanının dışına tıklamayı devre dışı bırakır.
        backdropClass:"blurBackground" //MAT-DIALOG açıldığında arkaplanı blur yapar.
      }      
    );
  }
 

  ngOnInit(): void 
  {    
    this.stokList = this.service.getStokListesi();
    this.service.getStokListesi().subscribe
    (
      res =>
      {
        this.dataSource = new MatTableDataSource(res);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      }
    )        
  }    
  
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  deleteRow(id:number)
  {
    this.service.delete(id)    
    .subscribe({
      next:(res)=> 
      {
        alert("Sicil Silindi.");
        this.service.getStokListesi()
        .subscribe
          (
            res =>
              {
                this.dataSource = new MatTableDataSource(res);
                this.dataSource.paginator = this.paginator;
                this.dataSource.sort = this.sort;
              }
          )     
        
      },
      error:()=>
      {
        alert("Hata! Sicil Silinemedi.")
      }
    })
  } 

 
}

#container
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #00c6ff;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0072ff, #00c6ff);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0072ff, #00c6ff); /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */
    
}

/*login panel start*/
.kayit-panel
{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;        
}

.mat-table
{
  margin-top: 2px;
}

.example-spacer
{
  flex: 1 1 auto;  
}

.mat-toolbar 
{
  background-color: white;  
  border-top-left-radius:30px;
  border-top-right-radius:30px;
  gap: 8px;
}


.login-giris-container {
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  padding: 50px;
  justify-content: center;
  background-color: #ffffff;
}

/*login panel end*/

.gorev-cubugu
{
    position: absolute;
    flex-direction: column;
    right: 20px;
    top: 15px;
}

.login-baslik
{
  text-align: center;
  font-weight: bold;
  font-family: Roboto, "Helvetica Neue", sans-serif;  
}

.giris-yap
{
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.mat-raised-button
{
  height: 40px;  
  border-radius: 10px;  
}


table 
{
  width: 100%;  
}

.div-table
{  
  position: relative;
  width: 100%;
  height: 550px;
  max-width: 1000px;
  max-height: 680px;
  border-radius: 30px;
  background-color: white;
}

.mat-form-field {
  font-size: 14px;
  width: 100%;
}

.login-kayit-container
{
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 1500px;
  max-height: 750px;  
}

.icerik
{  
  position: relative;
  display: flex;
  flex-direction: column;
  width: 1500px;
  height: 750px;
  background-color: #F5F5F5;
  padding: 0px;
  border-radius: 30px;
}

.fonksiyon
{ 
  position: absolute;
  background-color: #F5F5F5;
  height: 99px;
  width: 100%;
  padding: 10px;
  bottom: 0px;
  border-bottom-left-radius:30px;
  border-bottom-right-radius:30px;
}

.paginator
{
  position: absolute;
  left: 0;
  bottom: 217px;
  width: 100%;   
  text-align: center;  
}

.araclar
{
  
  position: absolute;
  width: 100%;
  bottom: 98px;
  padding: 20px;
  background-color: white;
}

.butonlar
{
  display:flex;
  position: relative;
  top: 2px;
  gap:10px;
  border-bottom-left-radius:30px;
  border-bottom-right-radius:30px;
  align-items: flex-end;
  padding: 10px;  
}

.mat-row .mat-cell 
{  
  cursor: pointer;  
}

.mat-row:hover .mat-cell
{  
  background:#ff4081;
  color: white;
}

.demo-row-is-clicked
{
  font-weight: bold;
  background:#fa0404;
  color: #F5F5F5;
}

.highlight {
  background-color: yellow;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="container">
    <div >
      <div >      
        <div >

          <mat-toolbar >            
            <span><mat-icon></mat-icon>ANA KATALOG STOK İŞLEMLERİ</span>
            <span ></span>
            <button mat-mini-fab color="warn"><mat-icon>question_mark</mat-icon></button>
            <button routerLink="/erp" mat-mini-fab><mat-icon>close</mat-icon></button>
          </mat-toolbar>
          <!--<div ><button routerLink="/erp" mat-mini-fab aria-label="Example icon button with a menu icon"><mat-icon>close</mat-icon></button></div>-->
          <!---  içerik gelecek-->                 
          <table mat-table #table [dataSource]="dataSource"  matSort>

            <!-- Name Column -->
            <ng-container matColumnDef="id">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
              <td mat-cell *matCellDef="let element" Width='100px'> {{element.id}} </td>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="grupKodu">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> GURUP KODU </th>
              <td mat-cell *matCellDef="let element" Width='150px'> {{element.grupKodu}} </td>
            </ng-container>

            <!-- Weight Column -->
            <ng-container matColumnDef="sicilKodu">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> SİCİL KODU </th>
              <td mat-cell *matCellDef="let element" Width='150px'> {{element.sicilKodu}} </td>
            </ng-container>

            <!-- Symbol Column -->
            <ng-container matColumnDef="sicilAdi">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> SİCİL ADI </th>
              <td mat-cell *matCellDef="let element" Width='500px'> {{element.sicilAdi}} </td>              
            </ng-container>

            <ng-container matColumnDef="action">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
              <td mat-cell *matCellDef="let element">
                <button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon" (click)="deleteRow(element.id)"><mat-icon>delete</mat-icon></button>
              </td>              
            </ng-container>

            <tr mat-header-row style="height: 50px;" *matHeaderRowDef="displayedColumns"></tr>
            
            <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index" (click)=rowSelected(i) [ngClass]="{'highlight': i === selectedItemIdx}"></tr>            
            <!-- Row shown when there is no matching data. -->
            <tr  *matNoDataRow><td  colspan="4">"{{input.value}}" Ürün bulunamadı! </td></tr>
          </table>

           <!-- Tablo Sayfalama -->
          <div ><mat-paginator style="background-color: white;" [pageSizeOptions]="[12]" showFirstLastButtons aria-label="Select page of periodic elements"></mat-paginator></div>
          <div >
            <mat-form-field appearance="outline">
              <mat-label>ÜRÜN ARA</mat-label>
              <input matInput (keyup)="applyFilter($event)" placeholder="Sicil Kodu, Sicil Adı, Grup kodu vb..." #input>
              <mat-hint>Ürün Arama</mat-hint>
            </mat-form-field>
          </div>

          <div >                        
            <div >
              <button style="width:200px;" mat-raised-button color="accent" type="submit" routerLink="/kayit"><mat-icon>save</mat-icon> Kayıt</button>
              <button style="width:200px;" mat-raised-button color="accent" type="submit" (click)="openDialog()"> <mat-icon>change_circle</mat-icon> Değiştir</button>
              <button style="width:200px;" mat-raised-button color="accent" type="submit" (click)="deleteSelected()"><mat-icon>delete</mat-icon> Sil</button>
            </div>            
          </div>          
        </div>              
      </div>    
    </div>  
</div>