Cannot set set Angular Material mat-select default option

Question

I use mat-select and try to set default value after options are loaded. My questions are:

1. Is it possible to set an items while populating the select list? Here is the config of y select list where I set the options:

  this.listControls = [
    {
      id: 'employee',
      type: 'select',
      options: this.listEmployees().pipe(
        map((list: PaginatedList) => {
          return list.items.map(x => {
            x.name = `${x.name} (${x.count})`;
            return x;
          });
        })
      )
    },
  ];

2. Is it possible to set default option (make one of the item selected) without using ngModel? I simply have an object value but I cannot make the it to be selected?

employee = {
    id: 100,
    name: 'Jonathan'
}

I also try to apply a filter to this.listControls[0], but as it is filled 'observable', it does not work:

const test = this.listControls[0].options.filter(x => x.id === 100);

It seems that contents of listControls is some custom-tailored type. Likewise, PaginatedList is neither Angular nor Material default type. Unless you provide us with stackblitz example it's hard to say why something works or not. If it's proprietary code - you should ask the author. I guess looking into compareWith property of MatSelect might get you on right track though. — TotallyNewb
MatSelect compares against references of the objects, not their value. If you hardcoded your own object and expect it to be selected, just because it has same value, well, that will not work. You need to have that object already provided to MatSelect to be able to set it as a selected one. — Julius

Msk Satheesh Msk Satheesh · Accepted Answer · 2021-02-08T15:02:57

Try Using:

app.component.ts

import { HttpClient } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { map } from "rxjs/operators";

/** @title Select with 2-way value binding */
@Component({
  selector: "select-value-binding-example",
  templateUrl: "select-value-binding-example.html"
})
export class SelectValueBindingExample implements OnInit {
  selected = "option2";
  listControls: any = [];

  constructor(private http: HttpClient) {}

  async ngOnInit() {
    this.listControls = [
      {
        id: "employee",
        type: "select",
        options: this.listEmployees().pipe(
          map((list: any) => {
            return list.data;
          })
        ),
        value: this.listEmployees().pipe(
          map((list: any) => {
            return list.data[0].first_name;
          })
        )
      }
    ];

    this.listControls.map((item: any, index: any) => {
      this.listControls[index].value.subscribe((data: any) => {
        this.listControls[index]["value"] = data;
      });
    });
  }

  listEmployees() {
    return this.http.get("https://reqres.in/api/users?page=2");
  }
}

app.component.html

<div *ngFor="let item of listControls">
  <mat-form-field appearance="legacy">
    <mat-label>Select an option</mat-label>
    <mat-select [(value)]="item.value">
      <mat-option>None</mat-option>
      <mat-option
        *ngFor="let item of item.options | async"
        [value]="item.first_name"
        >{{item.first_name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

Here the working stackblitz example: https://stackblitz.com/edit/angular-r4u37v-crowwk?file=src/app/select-value-binding-example.ts

Cannot set set Angular Material mat-select default option

1 Answers