Disable 3rd state in Angular Material MatSortable

user_4812515 0
Viewed 5297

There are three states in sort direction of MatSortable. Is there a way to disable the 3rd state? It has 'asc' | 'desc' | '', id like to only have 'asc' | 'desc' available. I'm currently filtering the sort direction, but I'm wondering if this is intuitive enough from a users perspective to not seem like a bug even though the header does display an arrow with current sort direction(see images below).

Oninit lifecycle hook I'm setting a sort default, thought setting disableClear to true would fix this but no-go. Any help appreciated!

defaultSort: MatSortable = {
  id: 'displayName',
  start: 'asc',
  /**
   * Whether to disable the user from clearing the sort by finishing the sort direction cycle.
   * May be overriden by the MatSortable's disable clear input.
   */
  disableClear: True
};

ngOnInit() {
  this.sort.sort(this.defaultSort);

  this.sort.sortChange.pipe(
    filter(sort => !!sort.direction),
    switchMap(sort => {
      // makes API request only with an actual direction.
    })
  );
}

No sort direction: No sort direction

With sort directions: asc enter image description here

angular-material2 angular
4 Answers

I'm a little unclear on your code, but it's something similar to this:

You have this on your component

@ViewChild(MatSort) sort: MatSort;

and

  ngOnInit() {
    ....
    this.dataSource.sort = this.sort;
  }

add this line after defining the sort

this.sort.disableClear = true;

Example Stackblitz

user_52862030

Adding the line Flignats mentioned, didn't work for me, so I had to add disableClear in the template, like:

<th mat-sort-header="firstName" disableClear>First name</th>

I hope this will help someone.

user_51425540

You have this on your component

@ViewChild(MatSort) sort: MatSort;

 ::ng-deep.mat-sort-header-arrow[style] {
// Hide default arrow stem
content: url('your icon);
height: 24px;
width: 20px;

}

add this line after defining the sort

this.sort.disableClear = true;
user_153743090

The answer which you have given is really helpful. adding 'disableClear' also solve other problem for me, Below are the details.

When we use mat default sport functionality, when we click on sort arrow 3rd time we get sort.direction is null. this make us to write some custom code, But when we add 'disableClear' to the template, 3rd time we are getting value as 'asc'.

Thanks for you answer

user_61935460
Related