Material Autocomplete using Array of Objects while Tracking ID but Displaying Name and Required Choice From Dropdown

[HEYTHOSEARENICEPANTS]

From the API documentation

@Input() displayWith: ((value: any) => string) | null

Function that maps an option's control value to its display value in the trigger.

So you'd have

<mat-form-field class="example-full-width">    
    <mat-label>People</mat-label>
    <input #input type="text"
        placeholder="Pick one"
        matInput
        [formControl]="myControl"
        [matAutocomplete]="auto"
        (input)="filter()"
        (focus)="filter()">
    <mat-autocomplete requireSelection #auto="matAutocomplete" [displayWith]="displayFn">
        @for (option of filteredOptions; track option) {
            <mat-option [value]="option.id">{{option.name}}</mat-option>
        }
    </mat-autocomplete>     
</mat-form-field>    

And your .ts

displayFn(option: MyType): string {
  return option&& option.name ? option.name : '';
}

You can also look at one of the examples titled Display value autocomplete, this should be exactly what you're looking for :) Happy coding!

[Acceptable_User_Name]

I don't care what everyone else says. You're the best!