In my code, I have a container that displays a list and you can pick an element from it. I want it to be able to auto-complete what I'm writing so that I can choose stuff from it easily. But right now, it doesn't perform auto-complete. Here is my code. What is wrong with it, and what should I do?

HTML:

     <ng-container matColumnDef="Product">
   <th mat-header-cell *matHeaderCellDef> Ürün </th>
   <td *matCellDef="let row; let i = index">
      <span *ngIf="EditIndex != i">{{row.Product?.StockIntegrationCode + ' - ' + row.Product?.ProductName}}</span>
      <mat-form-field *ngIf="EditIndex == i" class="w-100-p">
         <input type="text" required matInput name="Product"[(ngModel)]="row.Product"
         (input)="onProductSearchChange($event.target.value)"
         [matAutocomplete]="autoProduct">
         <mat-autocomplete autoActiveFirstOption #autoProduct="matAutocomplete"
         [panelWidth]="500" [displayWith]="displayProduct.bind(this)">
         <mat-option *ngFor="let dp of products" [value]="dp">
         {{dp.StockIntegrationCode +' - '+ dp.ProductName}}
         </mat-option>
         </mat-autocomplete>
      </mat-form-field>
   </td>
</ng-container>

TS:

    products: IProduct[];
    product: IProduct;
    productList: IProduct[];

onProductSearchChange(search: string) {
        let filterValue = (search as any).toLocaleLowerCase("tr");
        if (
          this._contractService.productList &&
          this._contractService.productList.length > 0
        ) {
          this.productList = this._contractService.productList.filter(
            (x) =>
              x.StockIntegrationCode.indexOf(filterValue) >= 0 ||
              (x.ProductName as any)
                .toLocaleLowerCase("tr")
                .indexOf(filterValue) >= 0
          );
        }
        if (!search) {
          this.product = null;
          this.productList = this._contractService.productList;
        }
      }
    
      displayProduct(product: IProduct): string | undefined {
        return product
          ? product.StockIntegrationCode + " - " + product.ProductName
          : "";
      }