How to use Angular Select

I want to select the data, which I previously designed as a different table in the backend section, with select and save it according to this selected operation. It seems logical to use angular material select for this, but I could not achieve this process myself.My goal here is to retrieve the water with a different table name using the select operation while adding a product to the product form. I am waiting for your help.

Water Type as a class:

export class List_Water_Type{

    id:string;
    waterType:string;
    conductance:number;
    conductanceMax:number;

}

create product as a class:

import { List_Water_Type } from "./water";
export class Create_Product {
    water?: List_Water_Type[];
}

create component ts:

  ngOnInit(): void {
    this.productValidation = this.formBuilder.group({
  weight:['', [Validators.required]],
      nitrogen: [false],
      water:[new FormControl()]
  });
  }

 @Output() createdProduct: EventEmitter<Create_Product> = new EventEmitter();

    create(){
      this.showSpinner(SpinnerType.BallAtom);
    const create_product: Create_Product = new Create_Product();
    this.productService.create(this.productValidation.value, () => {
      console.log(this.productValidation)
      if (this.data.callback) {
        this.data.callback();
      }
      this.hideSpinner(SpinnerType.BallAtom);
      this.alertify.message("Product successfully added.", {
        dismissOthers: true,
        messageType: MessageType.Success,
        position: Position.TopRight
      });
      this.createdProduct.emit(create_product); 
      console.log(create_product)

    }, errorMessage => {
      this.alertify.message(errorMessage,

        {
          dismissOthers: true,
          messageType: MessageType.Error,
          position: Position.TopRight
        });
    });

  }

Html:

<mat-form-field>
  <mat-label>Water Type</mat-label>
  <mat-select>
    @for () {
      <mat-option [value]=</mat-option>
    }
  </mat-select>
</mat-form-field>

You have to configure it as a formControlName. As for the syntax of @for. Please use the below working example as reference.

<form [formGroup]="productValidation">
  <mat-form-field>
    <mat-label>Water</mat-label>
    <mat-select formControlName="water">
      @for (listWaterType of listWaterTypes; track listWaterType) {
      <mat-option [value]="listWaterType.id"
        >{{listWaterType.waterType}}</mat-option
      >
      }
    </mat-select>
  </mat-form-field>
</form>

1. loop through the array listWaterTypes for each object has the name listWaterType

2. We track this loop by using the entire object by track listWaterType, but you can also track it by a single ID track listWaterType.id (better), which improves performance.

3. we specify the id field as value for a option and label as waterType.

Stackblitz Demo