I have two problems:

1. I was trying to create two filters for column "Status". I need to filter the status "Accepted" and "Declined" when i click any of the buttons.

2. The color of the text "accepted" should be in green and the text "declined" should be in red. I know how to do this in regular Javascript but with Angular I'm stuck. In javascript to add a new class

I used to do this :

--->>> MY CODE

CodePudding user response：

You can create a directive, look at this: https://angular.io/guide/attribute-directives

CodePudding user response：

1. You are using this.dataSource to extract the items that match the filter criteria, but you should be using ELEMENT_DATA instead. This way you won't be out of items after multiple filter actions.

2. You can also add a class conditionally in angular too. Try this:

<mat-cell
  *matCellDef="let element"
  [class.green]="element.status === 'accepted'"
  >{{element.status}}
</mat-cell>