Selection of input from the mat-select component is a composed object

Question

Selection of input from the mat-select component is a composed object

I am facing a challenge when trying to input a composed value into a select field. Let's consider our object contains only an ID and a name. The typical way to create a functional select would be:

<mat-form-field>
   <mat-label>Placeholder</mat-label>
   <mat-select>
      <mat-option *ngFor="let i of fooCollection" [value]="i.id">
         {{i.name}}
      </mat-option>
   </mat-select>
</mat-form-field>

While searching for a solution to assign a value, I came across this informative example in the documentation that simply adds a [(value)] option to the mat-select tag. However, as we are dealing with a composed object here, this method no longer functions.

Any thoughts on how to resolve this issue? Thank you in advance! Kev'

angular typescript drop-down-menu angular-material angular11

Answer 1

Answer №1

Check out this code snippet for a two-way value binding example in Typescript:

      /** @title Select with 2-way value binding */
  @Component({
    selector: 'select-value-binding-example',
    templateUrl: 'select-value-binding-example.html',
  })
  export class SelectValueBindingExample {

  myOptions = [
    new MyOptions('name1','description1' ),
    new MyOptions('name2','description2' ),
    new MyOptions('name3','description3' ),
  ]


  selectedOption = this.myOptions[2]

  }//Cls

  //-----------------------------------------------------//

  class MyOptions{
    constructor(
      public name:string,
      public description:string
    ){}
  }

Here is the corresponding HTML code:

          <mat-form-field appearance="fill">
      <mat-label>Select an option</mat-label>
      <mat-select [(value)]="selectedOption">
        <mat-option *ngFor="let myOption of myOptions" [value]="myOption">
          {{myOption.description}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <p>You selected: {{selectedOption|json}}</p>

If you include the line

<mat-select [(value)]="selectedOptionName">

, it will retrieve the value from [value] in each

<mat-option *ngFor="let myOption of myOptions" [value]="actualValueGoesHere">

. You can then use this value as needed.

To set an initial value, simply assign selectedOption = this.myOptions[2] (or any other initial choice).

Answer 2

Check out this code snippet for a two-way value binding example in Typescript:

      /** @title Select with 2-way value binding */
  @Component({
    selector: 'select-value-binding-example',
    templateUrl: 'select-value-binding-example.html',
  })
  export class SelectValueBindingExample {

  myOptions = [
    new MyOptions('name1','description1' ),
    new MyOptions('name2','description2' ),
    new MyOptions('name3','description3' ),
  ]


  selectedOption = this.myOptions[2]

  }//Cls

  //-----------------------------------------------------//

  class MyOptions{
    constructor(
      public name:string,
      public description:string
    ){}
  }

Here is the corresponding HTML code:

          <mat-form-field appearance="fill">
      <mat-label>Select an option</mat-label>
      <mat-select [(value)]="selectedOption">
        <mat-option *ngFor="let myOption of myOptions" [value]="myOption">
          {{myOption.description}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <p>You selected: {{selectedOption|json}}</p>

If you include the line

<mat-select [(value)]="selectedOptionName">

, it will retrieve the value from [value] in each

<mat-option *ngFor="let myOption of myOptions" [value]="actualValueGoesHere">

. You can then use this value as needed.

To set an initial value, simply assign selectedOption = this.myOptions[2] (or any other initial choice).

Selection of input from the mat-select component is a composed object

Answer №1

Similar questions

Angular 2 problem with navigation trails styling

The issue encountered is a TypeError stating that it is unable to retrieve properties of an undefined value, specifically in relation to the 'imageUrl

The type 'undefined' cannot be assigned to type 'Element or null'

Can Angular be used to dynamically filter a JSON object to display only the fields that match a specified filter text?

Using createContext in React.tsx to pass the state through useState

Guide to accessing the content of pure ES6 modules directly in the Chrome console without the need for Webpack

Is it achievable to have a Dynamic Angular Output?

What is the reason behind the failure of a react factory method compilation when extending a typescript class, despite it working perfectly fine on the base class?

Ways to fix ERROR Error: Expected validator to return Promise or Observable

Efficiently loading and locally filtering data in Angular 2 using Observables

What is the best way to align an extensive text and an image side by side within a table cell?

"Series of Subscriptions: Unleashing New

Can the default setting for --base-href be configured specifically for ng build and not for ng serve?

Navigating to child components within an Angular module is currently disabled

How to correctly deserialize dates in Angular 5

How can I resolve a bug in Nuxt2 when using TypeScript?

Displaying images in Ionic from a JSON URL source

React Bootstrap Forms: The <Form.Control.Feedback> element is failing to display when the validation is set to false

Error: The Turborepo package restricts the use of import statements outside of modules

The Radix UI Theme's dark mode isn't taking effect