5

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?

Cpt Kitkat
  • 1,392
  • 4
  • 31
  • 50
  • I see that when you add a new element, it is shown at the top of the list which means it is the first child. So, to the first child, you can add a class called highlighted and remove it after few seconds through a setTimeout – dileepkumar jami Feb 04 '19 at 10:28
  • If you are using jquery, you can use $('your first child class').effect("highlight", {}, 3000); – dileepkumar jami Feb 04 '19 at 10:29
  • @dileepkumarjami can you please show me how to do it.No i am not using jQuery I am using typescript and angular – Cpt Kitkat Feb 04 '19 at 10:31

2 Answers2

4

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;
    }
}
Nguyen Phong Thien
  • 3,237
  • 1
  • 15
  • 36
  • When i load the page all the columns are highlighted ... is it possible to add class or do something that other rows do not get highlighted – Cpt Kitkat Feb 04 '19 at 12:31
0

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.

Sanket Tikam
  • 94
  • 4