How to highlight a newly inserted row in mat-table angular 7

问题

I have a mat-table where I display list of rows. I have a add new button through which user can manually add a row. Working Stackblitz: https://stackblitz.com/edit/angular-axjzov-8zmcnp I want the option to highlight the newly inserted row for 2-3 sec so that the user can see the newly created row. How do I achieve this?

回答1:

You can add this to the style css

    mat-row.mat-row {
        animation: highlight 3s;
    }

    @keyframes highlight {
      0% {
        background: red
      }
      100% {
        background: none;
      }
    }

In case you only want to highlight the new rows, you need to define the new row to add a class to them.

So let's say the class name is "highlight".

In the component you add:

export class TableFilteringExample {
    //...
    newRowIndex = 0;
    //...
    addElement() {
        this.newRowIndex++;
        //...
    }
}

In the HTML template file:

    <!--...-->

    <mat-row *matRowDef="let row; columns: displayedColumns; let i = index"
        [ngClass]="{'highlight': i < newRowIndex}"></mat-row>

    <!--...-->

And in the style file:

.highlight {
    animation: highlight 3s;
}

@keyframes highlight {
    0% {
        background: red
    }
    100% {
        background: none;
    }
}

回答2:

In table-filtering-example.css I have added the following class

.highlight{
  background: green;  
} 

In table-filtering-example.ts I have added the following variable selectedRowIndex: number = -1; And when addElement() gets called in that I have incremented the position value of every row entry of ELEMENT_DATA using filter operator.

After that I set selectedRowIndex variable to 1 and add a time Interval event of 3sec which reset it to -1.

In table-filtering-example.html I have edited the following code

 <mat-row *matRowDef="let row; columns: displayedColumns;"
     [ngClass]="{'highlight':selectedRowIndex == row.position}"
        ></mat-row>

Here is the updated working stackBlitz link.

来源：https://stackoverflow.com/questions/54514130/how-to-highlight-a-newly-inserted-row-in-mat-table-angular-7