title: How to sort mat-option alphabetically in typescript in Angular 7 Material Design?
body: <p>As per <a href="https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe" rel="nofollow noreferrer">Angular documentation</a>, there is <strong>no</strong> orderBy pipe available to sort. As per the documentation I have to implement the sort in the component by myself. As I am very new to Angular, I am unsure, how to go about it. Can somebody please help out? I am looking for the actual code, which will do the trick. </p>
  
  <p>Code for <code>component.ts</code> - I want to sort the <code>indianStates</code> as per <code>viewValue</code>:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'addressentry',
    templateUrl: './addressentry.component.html',
    styleUrls: ['./addressentry.component.css']
  })
  export class AddressentryComponent implements OnInit {    
    constructor() { }    
    ngOnInit() {}
  
    indianStates: IndianStates[] = [
      {value: 'westbengal', viewValue: 'West Bengal'},
      {value: 'sikkim', viewValue: 'Sikkim'},
      {value: 'assam', viewValue: 'Assam'}
    ];
  }
  
  export interface IndianStates {
    value: string;
    viewValue: string;
  }
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div class="col form-group"&gt;
      &lt;mat-form-field&gt;
        &lt;mat-label &gt;State&lt;/mat-label&gt;
        &lt;mat-select&gt;
          &lt;mat-option *ngFor="let state of indianStates" [value]="state.value"&gt;
            {{state.viewValue}}
          &lt;/mat-option&gt;
        &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
  </code></pre>