Sort Angular Material Table columns in different dirrecitons

Issue

I have Angular material table with 5 columns. I understood that I can set active property to any of the columns but is there a way to sort on the start all the columns by descending order but active column by ascending order?

I have tried this:

@ViewChild(MatSort) sort: MatSort;

<table matSort matSortActive="orderColumn">

this.dataSource.sort = this.sort;

const sortState: Sort = {active: 'orderColumn', direction: 'desc'};
this.sort.active = sortState.active;
this.sort.direction = 'desc';
this.sort.sortChange.emit(sortState);

based on answer that I found here: Default sorting in Angular Material - Sort header

but it is not working.

Thank you!

Solution

Upon clicking a mat-sort-header that isn't currently active, it eventually invokes _setAnimationTransitionState({fromState: '', toState: 'active'}) on the clicked mat-sort-header.

However, when matSort.sort({...}) is programmatically called, the mat-sort-header that should be activated doesn't trigger the _setAnimationTransitionState().

I suspect there might be a problem with the _rerenderSubscription() function.

Thanks to Adgoncal I have found a working solution on his stackblitz. https://stackblitz.com/edit/angular-vuvckf?file=app%2Ftable-overview-example.ts

Answered By - Bilal Bashir