I'm working with Angular material and using Mat-Select. When the user makes a selection I want to grab a user which is actually an object with a Id and description property.

<mat-form-field>
    <mat-select placeholder="Select User Type"  (selectionChange)="selectUserType(user)">
        <mat-option  *ngFor="let user of userTypeList" [value]="user.description">
            {{ user.description }}
        </mat-option>
    </mat-select>
</mat-form-field> 

When the user makes a selection I am receiving undefined here:

public selectUserType(userType: OxygenUserType) {
    console.log('selected');
    this.selectedUserType = userType;
    console.log(this.selectedUserType);
}

I've also tried (selectionChange)="selectUserType($event.value)"but this doesn't produce an object. I need the user selection to be an object that looks like this:

{id:1, description:Agent},
{id:2, description:Dealer}

This object is based on this interface

export interface OxygenUserType {
    id: number;
    description: string;
}

I'm working with Angular material and using Mat-Select. When the user makes a selection I want to grab a user which is actually an object with a Id and description property.

<mat-form-field>
    <mat-select placeholder="Select User Type"  (selectionChange)="selectUserType(user)">
        <mat-option  *ngFor="let user of userTypeList" [value]="user.description">
            {{ user.description }}
        </mat-option>
    </mat-select>
</mat-form-field> 

When the user makes a selection I am receiving undefined here:

public selectUserType(userType: OxygenUserType) {
    console.log('selected');
    this.selectedUserType = userType;
    console.log(this.selectedUserType);
}

I've also tried (selectionChange)="selectUserType($event.value)"but this doesn't produce an object. I need the user selection to be an object that looks like this:

{id:1, description:Agent},
{id:2, description:Dealer}

This object is based on this interface

export interface OxygenUserType {
    id: number;
    description: string;
}

• javascript
• angular
• angular-material

• Currently you are binding user.description to mat-option, so when you select a option, selectionChange's $event.value will be user.description. If you want the entire object, just bind object itself to mat-option. – Pengyy Commented Jun 5, 2018 at 6:09
• Thx. I tried this and it works. – LDB Commented Jun 5, 2018 at 13:32
• Well I'm encountering another issue. Once I save the selected user from the dropdown, the selection no longer persists once the view is changed. – LDB Commented Jun 5, 2018 at 14:16
• That is because you don't give mat-select a init value. You should bind it a init value via [(ngModel)]. – Pengyy Commented Jun 6, 2018 at 0:38
• Thx for that. I was able to resolve by adding [( ngModel )]. – LDB Commented Jun 6, 2018 at 13:26

2 Answers 2

You can use [(value)] to set selected user. In option's value assign user object rather than only description as:

<mat-select placeholder="Select User Type" [(value)]="selectedUserType" (selectionChange)="onUserTypeChange()">
    <mat-option  *ngFor="let user of userTypeList" [value]="user">
        {{ user.description }}
    </mat-option>
</mat-select>


public onUserTypeChange() {
    console.log(this.selectedUserType);
}

I think your way doesn't work because you declare your user in mat-option, so mat-select doesn't know about this.

I would solve this by using a model so you don't need a function to store your value. If you want to still do some other stuff when the model changes you can call your value from the model in your change function.

so your html would be:

<mat-form-field>
  <mat-select placeholder="Select User Type" [(ngModel)]="selectedUserType" (change)="selectUserType()">
    <mat-option *ngFor="let user of userTypeList" [value]="user">
      {{ user.description }}
    </mat-option>
  </mat-select>
</mat-form-field>

and in your method:

  public selectUserType() {
    console.log('selected');
    console.log(this.selectedUserType);
    // do some stuff with your value.
  }