selecionar material angular e inserir dentro do mesmo campo

Question

Me deparei com este post que funciona bem quando o select é depois do input, mas como usar um mat-select antes do matinput? Assim que eu mudo a ordem, o componente se torna inutilizável, com a seleção sendo acionada a cada clique dentro do campo.

Entrada de material angular e selecione em um campo do formulário

Meu garfo: 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

Siga a documentação angular-material que examina a criação de um controle de campo de formulário personalizado: Criando um controle de campo de formulário personalizado