CODEWITHSUNDEEP
htmlangular
mneumann
mneumann

Reputation: 786

Send selected values from mat-select to controller on button click

I have a bunch of mat-selects like this:

  <mat-form-field>
    <mat-label>KPI</mat-label>
    <mat-select>
      <mat-option *ngFor="let kpi of KpiList" [value]="kpi">{{ kpi.name }}</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field>
    <mat-label>Modifier</mat-label>
    <mat-select>
      <mat-option *ngFor="let modifier of ModifierList" [value]="modifier">{{ modifier }}</mat-option>
    </mat-select>
  </mat-form-field>

Now, I want to send the selected values with a (click) event of a button:

  <button mat-button (click)="addComponent(data)">Add Component</button>

How do I get both values of the dropdowns to the event handler function? Thanks!

Upvotes: 0

Views: 1767

Answers (2)

Ganesh
Ganesh

Reputation: 6016

you can simply add ngModel to the Select dropdowns.

 <mat-form-field>
    <mat-label>KPI</mat-label>
    <mat-select [(ngModel)]="kpiValue">
      <mat-option *ngFor="let kpi of KpiList" [value]="kpi">{{ kpi.name }}</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field>
    <mat-label>Modifier</mat-label>
    <mat-select [(ngModel)]="modifierValue">
      <mat-option *ngFor="let modifier of ModifierList" [value]="modifier">{{ modifier }}</mat-option>
    </mat-select>
  </mat-form-field>

In your button function change to something like below

 <button mat-button (click)="addComponent(kpiValue,modifierValue)">Add Component</button>

Upvotes: 2

Avinash Sharma
Avinash Sharma

Reputation: 653

Try binding values of both drop-down to one object and then pass the same object to the event.

Upvotes: 1

Related Questions