Cannot set set Angular Material mat-select default option

debugcn Published at Dev

Natalia

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);

Msk Satheesh

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

Collected from the Internet

Please contact [email protected] to delete if infringement.