<mat-form-field>
  <mat-label>Best dish</mat-label>
  <mat-select>
    <mat-option *ngFor="let dish of dishes; let j = index" [value]="j" (onSelectionChange)="onDishChange(dish)">
      {{dish.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

How to emit the entire object using Angular Material's Select Component

The Select component within Angular Material library is capable of emitting the complete object. When you specify a value in the value attribute of the mat-option directive, that particular object will be emitted upon selection. This is the default behavior of the component.

One important note: Pay attention to the square brackets [], as they indicate that the assigned value is an object rather than a string.

Avoid this approach

<mat-option value="option3">Option 3</mat-option>

Instead, use this

<mat-option [value]="someObject">Option 3</mat-option>

1. Assign the object as the value for mat-option components

   Observe how the value is set using the row object from the data array

<mat-form-field>
  <mat-label>Select a food option</mat-label>
  <mat-select (selectionChange)="handleSelect($event)">
    <mat-option *ngFor="let row of data" [value]="row">{{ row.name }}</mat-option>
  </mat-select>
</mat-form-field>

2. Create a function for handling the event emitter

  handleSelect(food: any) {
    // The selected object can be accessed here
    console.log(food.value);
    this.selected = JSON.stringify(food.value);
  }

For further assistance, visit: https://stackblitz.com/angular/annvxmlqlqe

Your onSelectionChange($event) function allows for emitting any object, ensuring it is not closely tied to the specific data structure for display purposes. I encountered a similar issue when dealing with a list of locations, and I made some adjustments to your solution:

Template:

<form formGroup="foodForm">
  <mat-form-field>
    <mat-label>Favorite food</mat-label>
    <mat-select [formControl]="foodControl">
      <mat-option *ngFor="let food of foods" [value]="food.value">
        {{food.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</form>

Controller:

// The food list can be sourced from various places, including inside the controller or an API
foods: Food[] = [
  {value: '0', viewValue: 'Steak', foodCategory: 'Meat', Calories: 50},
  {value: '1', viewValue: 'Pizza', foodCategory: 'Carbs', Calories: 100},
  {value: '2', viewValue: 'Apple', foodCategory: 'Fruit', Calories: 25}
];
export class SelectOverviewExample {
  @Output() foodSelectionChange = new EventEmitter<any>();
  // If the food list comes from a parent component, use @Input() foods;

  foodForm: FormGroup;
  foodControl = new FormControl();

  constructor(private fb: FormBuilder) {
    this.foodForm = fb.group({
      food: this.locationControl
    });
  }

  onFoodSelectionChange(event): void {
    const food = this.foods.find(element => element.value === event.value);
    this.foodSelectionChange.emit(food);
  }
}

You can initialize the default value of your formControl in the OnInit lifecycle:

ngOnInit() {
  this.foodForm.controls['food'].setValue(/any value/);
}

Give this a shot

<mat-form-field>
  <mat-label>Favorite food choice</mat-label>
    <mat-select [(value)]="selected">
       <mat-option *ngFor="let option of choices; let index = index" [value]="index">
          {{option.viewText}}
       </mat-option>
    </mat-select>
</mat-form-field>

Selected option: {{choices[selected].foodType}}

Check it out here

Check out this code snippet that showcases how to select an object in Angular:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  selected = "";
  data = [
    { value: "0", viewValue: "Steak", foodCategory: "Meat", Calories: 50 },
    { value: "1", viewValue: "Pizza", foodCategory: "Carbs", Calories: 100 },
    { value: "2", viewValue: "Apple", foodCategory: "Fruit", Calories: 25 }
  ];
}

<h2>Select Food</h2>
<mat-form-field>
<mat-select [(value)]="selected">
<mat-option value="">Select favorite food</mat-option>
<mat-option *ngFor="let food of data" [value]="food">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<div>
<p>Your Favorite food is</p>
  <ul>
    <li>Food Name: {{selected.viewValue}}</li>
    <li>Calories: {{selected.Calories}}</li>
    <li>Category: {{selected.foodCategory}}</li>
  </ul>
</div>

View the demo here: https://stackblitz.com/edit/angular-h4oivc

There is a way to solve this issue without relying on indexes or searching through the collection. The problem lies in the select component's inability to compare two objects effectively. By utilizing the component API, it becomes possible to define a compareWith function to address this.

For instance:

Let's say my component receives a Set/Array of DTOs as input:

<app-user-select [(selectedUsers)]="dock.authorizedUsers"></app-user-select>

The template consists of a straightforward select element, with the compareWith function set up:

<mat-form-field appearance="fill">
  <mat-label>Users</mat-label>
  <mat-select [(value)]="selectedUsers" (valueChange)="selectedUsersChange.emit(selectedUsers)" [compareWith]="deepCompare" multiple>
    <mat-option *ngFor="let user of availableUsers" [value]="user">{{user.name}}</mat-option>
  </mat-select>
</mat-form-field>

In the controller, I specify the criteria for object equality within the deepCompare method. In my model, equality is determined by comparing the identitySourceId and id fields:

export class UserSelectComponent implements OnInit {

  @Input()
  selectedUsers: Set<UserDto> = new Set<UserDto>();
  @Output()
  selectedUsersChange = new EventEmitter<Set<UserDto>>();

  availableUsers: Array<UserDto>;

  constructor(private userApiService: UserApiService) { }

  ngOnInit(): void {
    this.getAvailableUsers();
  }

  private getAvailableUsers() {
    this.userApiService.getUsers().subscribe({
      next: users => this.availableUsers = users
    })
  }

  public deepCompare(optionValue: UserDto, selectionValue: UserDto): boolean {
    return optionValue.identitySourceId == selectionValue.identitySourceId && optionValue.id == selectionValue.id;
  }

}

The compareWith function can also be used to conduct a thorough equality check.

This code effectively loads the collection into the selected values and sends out the full collection to the parent component.