Solvedcomponents 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

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

You can do it like this:

  @ViewChild(MatSort) sort: MatSort;

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

// And we should remember that matSortActive shall go along with matSortDirection, to start working.

gotta love the sort.sort

@ichepurnoy yes, I set both but nothig... maybe is a bug. I have something like this:

<table matSort (matSortChange)="sortData($event)" matSortActive="{{ sortActive }}" matSortDirection="{{ sortDirection }}" matSortDisableClear>

If I set the sortActive and sortDirection values in the ngOnInit it works okay dynamically, but after the view init if I try to change those values is not working.