Display sorting arrows in both directions for an Angular material table by utilizing mat-sort (Angular material version 17)

I want to display both ascending and descending arrows for an unsorted column.

https://i.sstatic.net/1Shuw.png

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

.mat-sort-header-container:not(.mat-sort-header-sorted)
  .mat-sort-header-indicator {
  transform: translateY(0px) !important;
}
.mat-sort-header-container:not(.mat-sort-header-sorted)
  .mat-sort-header-pointer-left {
  transform: rotate(-45deg) !important;
}
.mat-sort-header-container:not(.mat-sort-header-sorted)
  .mat-sort-header-pointer-right {
  transform: rotate(45deg) !important;
}

Here is the CSS code I am currently using that only displays a single arrow.

https://i.sstatic.net/LGBe1.png

cssangularangular-material

Answer №1

If you're looking to enhance your CSS, you can utilize the following code snippet. By using the pseudo selectors :after, you can effectively display an icon with the content set as '↑↓'

.mat-sort-header-container:not(.mat-sort-header-sorted):after {
  content: '↑↓';
  backface-visibility: hidden;
  height: 15px;
  width: 15px;
  position: absolute;
  top:0px;
  right:0px;
}

.mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-arrow {
  visibility: hidden;
}

.mat-sort-header-container:not(.mat-sort-header-sorted)
  .mat-sort-header-indicator {
  transform: translateY(0px) !important;
}
.mat-sort-header-container:not(.mat-sort-header-sorted)
  .mat-sort-header-pointer-left {
  transform: rotate(-45deg) !important;
}
.mat-sort-header-container:not(.mat-sort-header-sorted)
  .mat-sort-header-pointer-right {
  transform: rotate(45deg) !important;
}

Take a look at this Stackblitz Demo for a visual demonstration

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the best practices for utilizing Angular form validation effectively?

I am currently working on implementing form validation in my project. I have created a basic login form and now I want to validate the input fields before submitting them to the server, while also providing visual feedback to the user if the inputs are inv ...

angulartypescriptangular-forms

The jQuery scrollTop feature seems to be malfunctioning

My code is causing an error that I don't understand. Any help would be appreciated... I'm getting the following error message: Property does not exist on type '.js--section-plan'.ts(2339) when I hover over the offset() in vscode $(&apos ...

javascriptjquerycssoffsetscrolltop

Fixed navbar stays at the top with body occupying 100% of the screen

In the process of developing a react app, I encountered an issue with a sticky top navbar from Bootstrap. After setting the body to height: 100%, the navbar no longer sticks as intended. I cannot use vh for one of my pages due to mobile content display i ...

cssreactjsbootstrap-4heightnav

The replacement of className in inline SVG is not permitted (Error: 'Cannot read property 'className.replace' of undefined')

I've hit a roadblock trying to manipulate classes within an SVG document to modify the rect elements. The code works smoothly on divs in an external document, but I've tried several other solutions as well – all listed below. I'm still rel ...

javascripthtmlcsssvg

How can I add Leaflet.TextPath or Leaflet.PolylineDecorator to an Angular 6 CLI application?

Struggling to integrate https://github.com/makinacorpus/Leaflet.TextPath into my Angular 6 CLI application without any luck. Any guidance would be greatly appreciated. Thank you in advance. UPDATE: Alternatively, what about this one? https://github.com/bb ...

javascriptangulartypescriptleafletangular-cli

What is the best way to ensure a div takes up the rest of the height on a page when the header's size is unpredictable

Is there a way to make the red area fill the remaining visible space without overlapping into the footer? I also need the infoContent section to be scrollable. The height of the header may vary. I came across some older solutions that suggested using Java ...

csshtml

The font-weight attribute seems to be malfunctioning in this particular scenario

Take a look at the CSS I've been working on: td{ color: white; font-family: arial; font-size: 13vh; font-weight: 300; text-align: center; vertical-align: middle; background-color: rgba(4,54,82, ...

htmlcss

Angular Material Page: The Art of Placing Toasts

Currently, I have a lengthy signup form that is styled using angular-material. To enhance the user interface, I have integrated toast notifications which are functioning perfectly in terms of positioning. However, I have noticed that when I scroll down t ...

angularjsangular-materialtoast

Is it possible for a div to contain more than one class in Twitter Bootstrap?

Is it possible for a div element to have multiple classes assigned to it? I am currently working with Twitter Bootstrap and I would like to utilize two predefined classes. Specifically, I want to apply the active class to a dropdown-toggle within a navig ...

htmlcsstwitter-bootstrap

Issue with Bootstrap 4 Navbar search box alignment towards the center

I've looked through numerous discussions on center aligning elements within a navbar, but I haven't found a solution yet. My struggle is with center aligning a search bar in my navbar, outside of the collapsible button. Despite trying various me ...

htmlcsstwitter-bootstrap

Angular request utilizing HTTP method GET

I'm encountering an issue with an http request using the post method. When I send it to the backend where the endpoint is mapped as My CarController @RequestMapping(value = "/car") @AllArgsConstructor @CrossOrigin public class CarController ...

angularspring-boot

What is the best way to create a drop-up feature for a Bootstrap navbar positioned at the bottom of the

I am experiencing some issues with my navbar. I have a dropdown menu in the third li element that does not seem to work properly. Despite adding the dropup class, it still fails to appear when I hover over it. <nav class="navbar navbar-expand-lg navb ...

htmlcsstwitter-bootstrapbootstrap-4

When closing a Bootstrap modal, the modal overlay does not automatically close along with it

Need assistance with a functionality where new requests can be added and existing requests can be edited using a single component that regenerates with the correct data when needed. Below is the code for the base component: home-component.html <ul c ...

angularbootstrap-4bootstrap-modal

Enhance drop-down menus in Bootstrap 4 by making the entire li area clickable

Currently working on a complex bootstrap 4 menu button with multiple levels and encountering an issue with the selectable area. To demonstrate the problem, I have marked the current clickable area with black borders and highlighted the desired clickable a ...

cssbootstrap-4

Navigating a table list in React using arrow keys without inadvertently scrolling the scrollbar

Currently, I've created a table component that contains a list of items. I've implemented hotkeys using the react-hotkeys package to allow users to navigate through the list using the 'arrow up' and 'arrow down' keys. The issu ...

javascripthtmlcssreactjs

When implementing the Slick Carousel with autoplay within an Isotope grid, the height of the image slides may occasionally reduce to 1 pixel when applying filters

I've been struggling with this issue for more than a day now, and despite searching through similar posts and trying their solutions, I still haven't been able to resolve it. Here's an example of the problem: https://jsfiddle.net/Aorus/1c4x ...

jquerycssbootstrap-4jquery-isotopeslick.js

Making an HTTP POST call from an Angular frontend to an Express server

I encountered an issue with sending a POST request to an API hosted on the same server but on a different port from my Angular front-end application. Below is the code snippet: import { Component, OnInit } from '@angular/core'; import {HttpCli ...

javascriptnode.jsangularhttpmean-stack

Counting Down in Angular using rxjsTimer and Observables Subscribing

Incorporating Angular5 into my current project. Currently, I am developing a live chat feature. Users can engage in the chat until the countdown timer reaches zero. Upon receiving the first user input, the countdown begins: private engage_session() { ...

angulartimerrxjsobservablesubscription

Toggle the class to slide in or out of the div

I am attempting to create a header with two positions - one absolute and one fixed. I want the header to smoothly slide in as you scroll down, and then slide out when you scroll back to the top. However, I am having trouble getting it to slide; instead, it ...

jqueryhtmlcss

Issues with Router navigation in an Ionic-Angular application

I am currently working on a straightforward application using Angular 9 and Ionic 5. The main page consists of a list of items. Here is my HTML code: <ion-header> <ion-toolbar> <ion-title>recipes</ion-title> </ion-toolba ...

angulartypescriptionic-frameworkangular-router