How to make sort arrows in angular mat-table always visible?

angular angular-material angular7

11,147

Solution 1

Just as Ervin commented but using ng-deep

::ng-deep .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-arrow {
  opacity: 0.54 !important;
  transform: translateY(0px) !important;
}

This doesn't remove the animations on the arrows on hover enter and hover exit though.

Solution 2

In mat-table insert [@.disabled]

<mat-table [@.disabled]="true">

Add this in scss

::ng-deep .mat-sort-header-arrow {
    transform: none !important;
    opacity: 1 !important;
}

11,147

Author by

deralbert

Interested in learning new things. One of the most biggest disadvantages of Stack Overflow: People can down vote questions or answers without giving a reason. It should to be restricted in such a way that no one can down vote questions or answers without giving reasons. Common palm civets are considered pests because they defecate all over attics and make loud noises fighting with each other at the most inopportune times. Their anal scent glands emit a nauseating secretion. They have an endangered species rating of “Least Concern,” which is apparently the politically correct way of saying, “Kill as many of these as you want; no one will miss them.” Common palm civets enjoy eating coffee cherries, and they pass the coffee beans through. Kopi luwak, one of the most expensive coffees in the world, is made from the coffee beans extracted from civet excretions. According to the Specialty Coffee Association of America, “It just tastes bad.” This makes the common palm civet a perfect mascot for concurrent and multithreaded development. -- Concurrency in C# Cookbook (2nd edition) by Stephen Cleary, citation from preface.

Updated on June 19, 2022

Comments

deralbert almost 2 years
The goal is to make sorting arrows of angular mat-table always visible (e.g. they have always opacity set to 0.54).

I tried adding some css code to my .css file for this component. It made all arrows visible (I set opacity to 0.54), but in this case all arrows stay with this opacity always, even if an arrow was clicked (normally the opacity will set to 1 if the arrow was clicked).

The code I added to my .css file:
```
::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
  opacity: 0.54 !important;
}
```
I want that arrows are always displayed with the Opacity 0.54. The rest behavior of the arrows should remain unchanged. In the case where a column is unsorted, e.g., the arrow is in an undefined state, the arrow should be an up arrow and have the opacity 0.54. If I click on the arrow, it should have the opacity set to 1. If I cancel the sorting, the arrow should have the opacity 0.54 again.

There is an example here: https://stackblitz.com/edit/angular-isxoc5. All arrows are displayed as I want. But if you click an arrow, it still have the opacity 0.54, not 1.
deralbert almost 5 years

Yep, thanks, it works. I added ::ng-deep myself. Could you maybe advise me something else? If I click on the arrow twice (and thus cancel the sorting), the arrow is an down arrow. If this arrow loses the focus and then gets the focus again, the arrow is an up arrow, not down arrow more. Can I somehow automate this behavior so the arrow will automatically refresh and immediately became an up arrow after the sorting is canceled?
kebbaben almost 5 years

@AlbertSteiner Sorry but I don't know how to fix that as it is an animation and from what I understand, you need to attach to and modify the animation in runtime. You should mark this as answer and open a new question for help on angular animations.
kebbaben almost 5 years

@AlbertSteiner Did you get an answer to your original question? If so you should mark that solution as the answer.