Disable 3rd state in Angular Material MatSortable

Question

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).

• material.angular.io

• mat-table

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:

With sort directions:

Answer 1

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

Answer 2

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.

Answer 3

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;

Answer 4

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