title: Angular7 Mat-select intercept change
body: <p>In my use case scenario I have a dropdown box (<code>mat-select</code>) which fills several input fields. Any change will fill the fields differently. Since the user could change a field I want to ask the user before the final change is executed if (s)he agree to clear(or change) all fields. In case of a NO the selection change will not happen and all fields should remain.</p>
  
  <p>I tried to reduce the use case to a <a href="https://stackblitz.com/edit/angular-dhgfmx?file=app/select-overview-example.ts" rel="nofollow noreferrer">sample</a>. I can select an item from the  dropdown and do some further actions.</p>
  
  <pre><code>  &lt;mat-select (selectionChange)="intercept($event.value)"&gt;
      &lt;mat-option *ngFor="let food of foods" [value]="food.value" &gt;
        {{food.viewValue}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  </code></pre>
  
  <p>But at the time the <code>selectionchange</code> is exectued the content of the dropdown is already changed. For the <a href="https://stackblitz.com/edit/angular-dhgfmx?file=app/select-overview-example.ts" rel="nofollow noreferrer">sample</a> I would like to have e.g.</p>
  
  <ol>
  <li>Select e.g. Pizza</li>
  <li>Popup appears</li>
  <li>!The dropdown remains on the original selection and after the popup disappears a change happen!</li>
  <li>Select e.g. Tacos</li>
  <li>Popup appears</li>
  <li>!The dropdown remains on the original selection (=Tacos) and after the popup disappears a change happen!</li>
  </ol>
  
  <p>I have no clue how to intercept the change event <strong>before</strong> the change happen.</p>