# How to open a new mat-select menu when the cursor moves over the mat-option selected item

I am trying to create a flow where the user opens a form , in which I have created multiple mat-options for Duration such as “Yesterday”,”Last Week”, “Last Month” , “Custom” etc .Currently my Front End looks like following. So when the user selects the “Custom” button, in that case it should open a new form/dialog to the left/right hand side where the user can then enter the start and end dates.

<div align="center">
<form [formGroup]="DatesFormGroup">
<mat-form-field style="margin-right: 40px;">
<mat-label>Choose Duration</mat-label>
<mat-select formControlName="dates" (selectionChange)="dateSelectionChanged()">
<mat-option value="Yesterday">Yesterday</mat-option>
<mat-option value="Week">Last 1 Week</mat-option>
<mat-option value="Month">Last 1 Month</mat-option>
<mat-option value="3_Months">Last 3 Months</mat-option>
<mat-option value="Year">Last 1 Year</mat-option>
<mat-option value="Custom">Custom</mat-option>
</mat-select>
</mat-form-field>
</form>
</div>


I am new to Angular, hence the code might not look very clean.
Will appreciate any help on this.

Source: New feed
Source Url How to open a new mat-select menu when the cursor moves over the mat-option selected item