How to unselect selected option in md-select Angular2

If you are using angular forms, you can always patchValue to '' as like below.

First, the select element. This example is using Ionic, but it's the same as Angular.

<ion-select formControlName="formal" item-start>
   <ion-option *ngFor="let option of input.options" value="{{option}}">{{option}}</ion-option>
</ion-select>

<ion-icon color="danger" name="close" (click)="unselect('formal')" item-end></ion-icon>

Where form is a FormGroup.

  form: FormGroup;

And the unselect method patches a null value.

  unselect(id: string): void {
    let reset = {};
    reset[id] = ''
    this.form.patchValue(reset);
  }

Best regards!

I ended up using ngModel and setting that value to undefined to get the required result.

<md-select id="formal" [(ngModel)]="selectedValue" formControlName="formal" placeholder="Default - No value selected">
    <md-option value="1">formal</md-option>
    <md-option value="2">informal</md-option>
 </md-select>

<div  (click)="unselect()">click me to clear md select</div>

In the Component

unselect(): void {
   this.selectedValue = undefined;
}

plunkr for the answer.

What about using a method of matSelect.

<mat-select (selectionChange)="onChange($event)">

onChange(event: MatSelectChange) {
    const matSelect: MatSelect = event.source;
    matSelect.writeValue(null);
    // ...
}

I have another solution that I think worth to mention it: add an empty <md-option> and reset the <md-select> on its click

  <md-select id="formal" formControlName="formal" placeholder="Default - No value selected">
      <md-option (click)="form.controls.formal.reset()"></md-option>
      <md-option value="1">formal</md-option>
      <md-option value="2">informal</md-option>
  </md-select> 

this way you don't need any custom code in your Component neither use ngModel

see Plunker