how to change border-bottom-color in angular material (table)

Question

i use of angular material(table) for show users list, and get user of server, now if user is number 0, show border-bottom-color red,and if number 1, show border-bottom-color green and .... ,I've done it, but it only runs once, please help me

  <ng-container matColumnDef="date">
    <mat-header-cell *matHeaderCellDef>date</mat-header-cell>
    <mat-cell *matCellDef="let orderList">{{ orderList.date }}</mat-cell>
  </ng-container>


  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>


    <mat-row [style.border-bottom]="
      user.status == 0 ? '3px solid red' : ''||
      user.status == 1 ? '3px solid green' : ''||
      user.status == 2 ? '3px solid blue' : ''||
      user.status == 3 ? '3px solid skyBleu' : ''||
      user.status == 4 ? '3px solid purple' : ''||
      user.status == 5 ? '3px solid #254e54' : ''
      "
      [routerLink]="['/showOrder']"
      routerLinkActive="router-link-active" *matRowDef="let row; columns: displayedColumns;"
      fxLayoutAlign="center center">
    </mat-row>

</mat-table>

what do you mean by works only once? is it means when you refresh it will not work or any other thing. Please make it clear a bit — Md Rafee
i mean It checks the first user. and set border color user one for all user and it is wrong. and every user has border-bottom-color himself — user11022643
please make a stackblitz so that the problem would be clear for all of us — Md Rafee
i mean it is, Each number has a specific border-bottom-color , number 1 color green and number 2 color blue and number 0 color red, number 3 color purple,Now based on border-bottom-color changes border-bottom-color users ,but changes border-bottom-color all user based on The first user number — user11022643

Md Rafee Md Rafee · Accepted Answer · 2019-09-04T07:31:56

You need to use row.user instead of user.status Live Example: Stackblitz

Explanation:

When you use user.status it will get from the your object getting from server. As it matches first condition user.status == 0, all the rows are styled with that color. But when you use row.user, it will check for each row and style according to the condition. Thus it solved your problem.

how to change border-bottom-color in angular material (table)

1 Answers