How to pass select option value to the onSelectValue function in order to put the value in the object in the function?

Question

JavaScript

My template :

<mat-form-field appearance="fill">
    <mat-select>
        <mat-option></mat-option>    
        <mat-option
            *ngFor="let filterItem of itemsShop.filterItems"
            [value]="filterItem"
            (click)="onSelectValue()"
        >
            {{ filterItem.name }}
        </mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field appearance="fill">
    <mat-select>
        <mat-option></mat-option>    
        <mat-option
            *ngFor="let filterItem of itemsShop.filterItems"
            [value]="filterItem"
            (click)="onSelectValue()"
        >
            {{ filterItem.name }}
        </mat-option>
    </mat-select>
</mat-form-field>

My ts file:

onSelectValue(val1: string, val2: string){
        let obj = {
            firstValue: val1,
            secondValue: val2,
        }
        return obj
    }

Answer 1

I don't know much about JS, but I think this topic is a bit similar to your question, it just needs to be sorted out and changed a lot of things!
However, let me give you an example:

<select onchange="onSelectValue(this.options[this.selectedIndex])">
    <option value="AAA">val1</option>
    <option value="BBB">val2</option>
    <option value="ccc">val3</option>
    <option value="DDD">val4</option>
</select>

function onSelectValue(opt) {
    alert(opt.value);     /* e.g. DDD */
    alert(opt.text);      /* e.g. Rome */
}