0

I'm new to Angular and html, so I'm looking for help. I have this code:

<mat-form-field>
  <mat-select (valueChange)="changeStatus(list.name, card.name)">
    <mat-option *ngFor="let i of lists"> {{i.name}} </mat-option>
  </mat-select>
</mat-form-field>

What I need to do, is to pass {{i.name}} (instead of list.name) into changeStatus() function. Basically what happens, is when I choose option in drop-box, I want to pass option I chose into function. Any ideas on how to do that? Thanks in advice

Improve this question
1
  • Mark my answer if it helped:) Commented May 27, 2018 at 15:25

2 Answers 2

Reset to default
2

You can use onSelectionChange provided by MatSelect component and pass the $event variable.

Taken from the documentation: selectionChange: EventEmitter<MatSelectChange>

MatSelectChange has two properties:

source: MatSelect
value: any

You have to change:

<mat-select (valueChange)="changeStatus(list.name, card.name)">

To:

<mat-select (selectionChange)="onSelectionChange($event)">

And on your component.ts you can handle the event like this:

onSelectionChange($event: MatSelectChange) {
    const list = $event.value; // const or let depending on your handle logic
    // Your logic here
}

PS: 80% of the times simple tasks that you look for in Angular Material are straight forward. Make sure you check the API + Examples so you can learn the "Angular Way" of doing stuff.

It is the actual purpose of Angular Material "Our goal is to build a set of high-quality UI components built with Angular and TypeScript, following the Material Design spec. These components will serve as an example of how to write Angular code following best practices."

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for your solution. Yeah, I tried to search for mat-select, mat-option and mat-form docs, but did not find answers I was looking for.
1

Use selectionChange event with Template reference variables for it

 <mat-form-field>
      <mat-select #ref (selectionChange)="changeStatus(ref.value)">
        <mat-option *ngFor="let i of lists" [value]="i"> {{i.name}} > </mat-option>
      </mat-select>
    </mat-form-field>

Component

changeStatus(value)
{
console.log(value);
}

LIVE DEMO

Improve this answer

7 Comments

The value of ref.value is undefined
I have provided a working stackblitz? I did not the get issue you might be doing something wrong
could you Fork my stackblitz and reproduce the issue
I just followed your example in answer, I'm not sure whats wrong
That sounds quite strange it should not happen could you update your answer with rest of the code
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.