title: Default sorting in Angular Material - Sort header
body: <p>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.</p>
  
  <p>This is what I want to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/7jzA5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7jzA5.png" alt="enter image description here"></a></p>
  
  <p>Original code:</p>
  
  <pre><code>&lt;table matSort (matSortChange)="sortData($event)"&gt;
    &lt;tr&gt;
      &lt;th mat-sort-header="name"&gt;Dessert (100g)&lt;/th&gt;
      &lt;th mat-sort-header="calories"&gt;Calories&lt;/th&gt;
      &lt;th mat-sort-header="fat"&gt;Fat (g)&lt;/th&gt;
      &lt;th mat-sort-header="carbs"&gt;Carbs (g)&lt;/th&gt;
      &lt;th mat-sort-header="protein"&gt;Protein (g)&lt;/th&gt;
    &lt;/tr&gt;
  
    &lt;tr *ngFor="let dessert of sortedData"&gt;
      &lt;td&gt;{{dessert.name}}&lt;/td&gt;
      &lt;td&gt;{{dessert.calories}}&lt;/td&gt;
      &lt;td&gt;{{dessert.fat}}&lt;/td&gt;
      &lt;td&gt;{{dessert.carbs}}&lt;/td&gt;
      &lt;td&gt;{{dessert.protein}}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I was trying something like this, but it doesn't work (no arrow displayed, not sorted)</p>
  
  <pre><code>&lt;table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortStart="asc" matSortDisableClear&gt;
  </code></pre>
  
  <p>Here's link to <a href="https://plnkr.co/edit/iYVEwPwzLZkXjfk83Om8?p=preview" rel="noreferrer">Plunker</a></p>