question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[MatSort] sort function doesn't render sorting arrow

See original GitHub issue

What is the expected behavior?

sort function in MatSort should update sorting arrow rendering state.

What is the current behavior?

Currently sort function in MatSort not updating sorting arrow rendering state.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-cfcugl-17fxat If you click “sort by name” button you will see this bug. “Sort with fix” button shows the easiest way to fix this bug.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All

Is there anything else we should know?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:7
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
francescodistcommented, May 16, 2019

@jysoo The solution you proposed doesn’t work properly for me, when the arrow is supposed to be cleared. Calling the _handleClick() function, instead, solves it for me. Probably we could have a function on MatSort that basically does what “sortByNameFixed” is doing, provided an id (string) for a sortable

sortByNameFixed() {
    const sortHeader = this.sort.sortables.get('name');
    sortHeader['_handleClick']();
  }
0reactions
angular-automatic-lock-bot[bot]commented, Sep 10, 2022

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

MatSort is showing the arrows but it doesn't actually sort the data
dataSource.sort = this.sort method, so when I click the headers, they should toggle between sorting ascending and descending. Instead, though ...
Read more >
Implementing Custom Sorting in Columns in JavaScript
This tutorial will describe how to give your users the ability to sort table columns using the MatTable's built-in sorting mechanism. Demo ...
Read more >
Angular mat-table sort example: Adding sorting to the material ...
In this tutorial we will learn how to sort a mat-table in Angular. With the help of MatSortModule we can add sorting to...
Read more >
Sort header - Angular Material
MatSortHeader. Applies sorting behavior (click to change sort) and styles to an element, including an arrow to display the current sort direction.
Read more >
Sorting an Angular Material table - how to use MatSort and ...
A better solution is to add the sort to the dataSource with a setter. This will ensure the sort is added to the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found