[Fixed] How can I pass the value of a selected option of a dropdown box(which is in a form) from html to ts file, without submitting the form in Angular

Issue

I’m new to angular. The following code section carries a dropdown box which is in a form. I’m trying to pass ‘serial’ from HTML file to ts file. I’m trying to do this without submitting the form. However, I’m unsuccessful till now. What can I do to pass ‘serial’ from HTML to ts file without submitting the form?

                            <mat-option>All</mat-option>
                            <ng-container *ngFor="let userRole of serialList">
                                <ng-container *ngFor="let serial of userRole.SerialOneList">
                                    <mat-option [value]="serial">
                                        {{serial}}
                                    </mat-option>
                               </ng-container>

                            </ng-container>

                        </mat-select>
                        <mat-error>Serial Number is required!</mat-error>

                    </mat-form-field>

Solution

Material select API provides selectionChange emitter that you could bind an handler to.

Try the following

Template

<mat-form-field>
  ...
  <mat-select (selectionChange)="onSelectionChange($event)">
    <mat-option>All</mat-option>
    <ng-container *ngFor="let userRole of serialList">
      <ng-container *ngFor="let serial of userRole.SerialOneList">
        <mat-option [value]="serial">
          {{serial}}
        </mat-option>
      </ng-container>
    </ng-container>
  </mat-select>
  <mat-error>Serial Number is required!</mat-error>
</mat-form-field>

Controller

import { MatSelectChange } from "@angular/material/select";

onSelectionChange(event: MatSelectChange) {
  console.log(event.value);
}