Default sorting in Angular Material - Sort header

Question

How can I change Angular Material code below, so that data-table is sorted by \'name\' column, ascending order by default. Arrow (indicating current sort direction) must be

Answer 1

@ViewChild(MatSort) sort: MatSort;

this.dataSource.sort = this.sort;

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

should work. demo

And to show sorting direction arrow, add next css (workaround)

th.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow {
    opacity: 1 !important;
    transform: translateY(0) !important;
}