Angular Material Select Dropdown, Emit Whole Object Item, not just a value

mat-select not displaying value
mat-select formcontrolname
mat-select change event not working
angular material select observable
mat-select option not showing selected value
mat-select openedchange
mat-select (selectionchange)
angular material select list

Angular Material select dropdown API only emits a value. Both [(ngModel)] and (selectionChange) only emit single member , not the whole object data field.

For example eg, it only emits the food.value = 2, does not emit other class fields for a row list item, like foodName, foodDescription, foodWeight, etc, (need to emit all the corresponding members for a listId)

How do I emit the whole object for food, given an food.value ? Needs to work for Any Material Dropdown in the future created, not just specific cases. Does Material Angular have any specific options to allow this?

The answers below, only work for one particular example, trying to see larger picture.

https://material.angular.io/components/select/api

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

Class example, for 2, need foodCategory, Calories, and other fields, etc

export class SelectOverviewExample {
  foods: Food[] = [
    {value: '0', viewValue: 'Steak', foodCategory: 'Meat', Calories: 50},
    {value: '1', viewValue: 'Pizza', foodCategory: 'Carbs', Calories: 100},
    {value: '2', viewValue: 'Apple', foodCategory: 'Fruit', Calories: 25}
  ];
}

Does anyone have a better solution? Otherwise, will to write this in the selectionChange onOutput method. Seems like Angular Materials would have better option,

this.foods.find(x=>x.value =="2")

Note for solutions below; Need to have solution for any different classes, with many type of members, etc


import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Observable }    from 'rxjs/Observable';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  formGroup: FormGroup;
  titleAlert: string = 'This field is required';
  selected;
  data = [
    {value: '0', viewValue: 'Steak', foodCategory: 'Meat', Calories: 50},
    {value: '1', viewValue: 'Pizza', foodCategory: 'Carbs', Calories: 100},
    {value: '2', viewValue: 'Apple', foodCategory: 'Fruit', Calories: 25}
  ];;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.selected = 0
  }


}
<h4>Basic mat-select</h4>
<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select [(value)]="selected">
    <mat-option *ngFor="let food of data; let i = index" [value]="i">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>
<div>
Selected value: {{data[selected].foodCategory}}
</div>

mat-select not pre selecting a value when mat-option has async , Angular Material select dropdown API only emits a value. Both [(ngModel)] and ( selectionChange) only emit single member , not the whole� Angular Material Select is created using <mat-select> which is a form control for selecting a value from a set of options. To add elements to select option, we need to use <mat-option> element. To bind value with <mat-option>, we need to use value property of it. The <mat-select> has also value property


<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods; let i = index" [value]="i" (onSelectionChange)="onValueChange(food)">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

#StackBounty: #angular #typescript #angular-material #angular7 , What is the current behavior? mat-select does not show the . Which versions of Angular, Material, OS, TypeScript, browsers are affected? to show the full country name in the menu but only the code after selected? info in the select trigger, is to always have the selected item as an option that is hidden. In this Angular tutorial, I’m going to share with you how to work with Angular 7|8|9 Select Dropdown. We’ll learn to work with Angular select dropdown with Reactive Forms. In this tutorial i will show you how you can create, implement and validate select dropdown in Angular app.


Your onSelectionChange($event) function can emit any object, it is not tightly coupled with the data structure you want to display. I had a similar problem with a list of locations, I modified your solution a bit:

Template:

<form formGroup="foodForm">
  <mat-form-field>
    <mat-label>Favorite food</mat-label>
    <mat-select [formControl]="foodControl">
      <mat-option *ngFor="let food of foods" [value]="food.value">
        {{food.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</form>

Controller:

// Food list may come from anywhere, even from inside the controller, or from 
  an API
foods: Food[] = [
  {value: '0', viewValue: 'Steak', foodCategory: 'Meat', Calories: 50},
  {value: '1', viewValue: 'Pizza', foodCategory: 'Carbs', Calories: 100},
  {value: '2', viewValue: 'Apple', foodCategory: 'Fruit', Calories: 25}
];
export class SelectOverviewExample {
  @Output() foodSelectionChange = new EventEmitter<any>();
  // if food comes from a parent component @Input() foods;

  foodForm: FormGroup;
  foodControl = new FormControl();

  constructor(private fb: FormBuilder) {
    this.foodForm = fb.group({
      food: this.locationControl
    });
  }

  onFoodSelectionChange(event): void {
    const food = this.foods.find(element => element.value === event.value);
    this.foodSelectionChange.emit(food);
  }
}

You can set the default value of your formControl in the OnInit lifecycle:

ngOnInit() {
  this.foodForm.controls['food'].setValue(/any value/);
}

Select, Angular Material select dropdown API only emits a value. Both [(ngModel)] and ( selectionChange) only emit single member , not the whole object data field. it only emits the food.value = 2, does not emit other class fields for a row list item,� UI component infrastructure and Material Design components for mobile and desktop Angular web applications.


try this one

<mat-form-field>
  <mat-label>Favorite food</mat-label>
    <mat-select [(value)]="selected">
       <mat-option *ngFor="let food of data; let i = index" [value]="i">
          {{food.viewValue}}
       </mat-option>
    </mat-select>
</mat-form-field>
Selected value: {{data[selected].foodCategory}}

https://stackblitz.com/edit/angular-thvpvz

Chips, If not specified, the placeholder will be used as label. Unique id of the element. Change event object that is emitted when the select value has changed. In this post, we’ll see how to bind select dropdown list in Angular 8 app by extending the same app. Bind Select DropDown List in Angular 8. If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here. The book is updated to Angular 8.


Here is a selection that returns the object

import { Component } from "@angular/core";
// import { Observable }    from 'rxjs/Observable';

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  selected = "";
  data = [
    { value: "0", viewValue: "Steak", foodCategory: "Meat", Calories: 50 },
    { value: "1", viewValue: "Pizza", foodCategory: "Carbs", Calories: 100 },
    { value: "2", viewValue: "Apple", foodCategory: "Fruit", Calories: 25 }
  ];
}
<h2>Select Food</h2>
<mat-form-field>
	<mat-select [(value)]="selected">
		<mat-option value="">Select favorite food</mat-option>
		<mat-option *ngFor="let food of data" [value]="food">
			{{food.viewValue}}
		</mat-option>
	</mat-select>
</mat-form-field>
<div>
	<p>Your Favorite food is</p>
  <ul>
    <li>Food Name: {{selected.viewValue}}</li>
    <li>Calories: {{selected.Calories}}</li>
    <li>Category: {{selected.foodCategory}}</li>
  </ul>
</div>

Angular Material Select Change Event, It is designed to work inside of a <mat-form-field> element. Each <mat-option> has a value property that can be used to set the value that will be It is possible to disable the entire select or individual options in the select by using the property which can be used to apply additional CSS classes to the dropdown panel. Angular Material Multiselect DropDown List | Multi Select Box. Sometimes we need multiselect dropdown menu, Angular Materiala provides (multiple) attribute which enables you to select multiple options from the list. Here is an example of multiple select dropdown example-


ion-select, <mat-chip-list> displays a list of values as individual, keyboard accessible, chips. Whenever the selection state changes, a ChipSelectionChange event will be emitted via (selectionChange) . This directive adds chip-specific behaviors to the input element within <mat-form-field> for adding and View full example. So after submitting a new OPTION, it is there, but not selected. The reason of this is that Angular uses object identity to select options. So when we get a new data, objects will have different


Change Log - DropDowns - Kendo UI for Angular, Angular Material Select provides selectionChange event that emits when the selected value has been changed by the user. changed by the user. The event selectionChange is used with <mat-select> element as following. Angular 8/9 Select Dropdown Tutorial with Reactive Forms is going to be discussed today. We’ll learn to work with Select dropdown in Angular 8 with Reactive Forms. We are going to create and validate select dropdown HTML element using Reactive forms.


By default, the select uses object equality ( === ) to determine if an option is selected. The popover interface does not have a Cancel button, clicking on the backdrop will close the overlay. The ion-select element is represented on the view by the selected value(s), or placeholder if there is none, and dropdown icon. So now we have the full picture: getting the value of the selected dropdown menu item with Angular requires that an event handler be set for the (change) attribute of a select element. But because select elements have one or more children (i.e. the option elements), we need to inspect the event object that is passed to the change event handler.