How to unselect selected option in md-select Angular2

Question

In material2 when a select is initialized no default value is selected. If user selects a value he can't unselect it. I want to enable the user to unselect the value.

Plunkr

I went through the help already available but wasn't able to use it.

<mat-select id="formal"  formControlName="formal" placeholder="Default - No value selected">
   <mat-option value="1">formal</mat-option>
   <mat-option value="2">informal</mat-option>
</mat-select>

Answer 1

What about using a method of matSelect.

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

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

Answer 2

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.