angular material select and input inside the same field

Question

I came across this post which works well when the select is after the input, but how would one use it with a mat-select before the matinput? As soon as I switch the order, the component becomes unusable, with the select being triggered with every click inside the field.

Angular Material Input and select in one form field

My fork: https://stackblitz.com/edit/angular-6nqzf1-ox413y?file=app%2Fform-field-overview-example.html

    <mat-form-field appearance="outline">
        <mat-label>End Time</mat-label>
        <mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm">
            <mat-option value="AM">AM</mat-option>
            <mat-option value="PM">PM</mat-option>
        </mat-select>
        <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
   </mat-form-field>

Answer 1

Follow the angular-material docs which looks at creating a custom form field control: Creating a custom form field control