Default sorting in 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 displayed.

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Dessert (100g)</th>
    <th mat-sort-header="calories">Calories</th>
    <th mat-sort-header="fat">Fat (g)</th>
    <th mat-sort-header="carbs">Carbs (g)</th>
    <th mat-sort-header="protein">Protein (g)</th>
  </tr>

  <tr *ngFor="let dessert of sortedData">
    <td>{{dessert.name}}</td>
    <td>{{dessert.calories}}</td>
    <td>{{dessert.fat}}</td>
    <td>{{dessert.carbs}}</td>
    <td>{{dessert.protein}}</td>
  </tr>
</table>

What is the expected behavior?

What is the current behavior?

I was trying something like this, to show arrow (indicating sort order) but it doesn’t work.

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortStart="asc" matSortDisableClear>

What are the steps to reproduce?

Here’s link to Plunker StackOverflow Question

[shalugin]

You can do it like this:

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit(): void {
    this.sort.sort(<MatSortable>{
        id: 'id',
        start: 'desc'
      }
    );
  }

[andrewseguin]

You’re mistaking matSortStart for matSortDirection.

Try this:

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="asc" matSortDisableClear>

https://plnkr.co/edit/sg0hC5d8LTjLKhbH9Eug?p=preview

matSortStart can be used to reverse the cycle used when sort (e.g. when the user clicks to sort, it starts at desc instead of asc).