title: onSelectionChange getting called twice in Angular
body: <p>I am trying to attach <code>onSelectionChange</code> event on <code>select</code> as follows:</p>
  
  <pre><code>   &lt;mat-form-field class="full-width languageDiv" appearance="outline" *ngIf="languages &amp;&amp; selectedLanguage"&gt;
            &lt;mat-label&gt;Language&lt;/mat-label&gt;
            &lt;mat-select [(value)]="selectedLanguage"&gt;
              &lt;mat-option *ngFor="let language of languages" [value]="language" (onSelectionChange)="onLangChange($event)"&gt;
                {{language}}
              &lt;/mat-option&gt;
            &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>Here is the <code>onLangChange</code> method</p>
  
  <pre><code> onLangChange(e) {
      console.log(e);
          const languageSelected = e.source.value;
          if( this.selectedLanguage !== languageSelected){
  
              this.selectedLanguage = (languageSelected);
  
          }
    }
  </code></pre>
  
  <p>Here is the <code>stackblitz</code> link:
  <a href="https://stackblitz.com/edit/angular-otmzch" rel="nofollow noreferrer">StackBlitz</a></p>
  
  <p>For every change in selection, <code>onLangChange</code> is getting called twice which is messing up my other logic (not mentioned here to keep the code simple). Why is this getting called twice?</p>