How can I perform click events in a select dropdown (Angular)? - html

Question

I have two buttons (month, year) that react to different events... Now I would like to insert these events in a select. Can you please tell me how this works?
My Code:
// Solution with buttons
<button class="menu-button" type="button" mat-raised-button [ngClass]="{'active': selectedMenuLeft === 'monthButton'}" (click)="activateButton(1)">Monat</button>
<button class="menu-button" type="button" mat-raised-button [ngClass]="{'active': selectedMenuLeft === 'yearButton'}" (click)="activateButton(2)">Jahr</button>
activateButton(check) {
if (check === 1) {
this.selectedMenuLeft = 'monthButton';
this.navService.sendNavEventUpdate('month');
} else {
this.selectedMenuLeft = 'yearButton';
this.navService.sendNavEventUpdate('year');
}
}
// The same with a select. What do I have to optimize?
<select class="upload_slc" required title="">
<!-- Options -->
<option value="content" *ngFor="let navValue of menuLeftMobile" [value]="navValue">
{{ navValue }}
</option>
</select>
// Menu left in mobile
menuLeftMobile: Array<string> = ['Monat', 'Jahr'];

Answer 1

<mat-select placeholder="Select Menu" name="nav_value"
(selectionChange)="menuChangeAction(nav_value)"
[(ngModel)]="nav_value">
<mat-option *ngFor="let navValue of menuLeftMobile"
[value]="navValue">{{ zone.label }}</mat-option>
</mat-select>
In your component you can do the following:
nav_value: any;
menuChangeAction(value) {
console.log(value) // you will get your selected value here
}

Answer 2

The Simplest Way To That Is
<select #mySelect (change)='onOptionsSelected(mySelect.value)'>
And Function Will Be Like This
activateButton(check) {
if (check === "Monat") {
this.selectedMenuLeft = 'monthButton';
this.navService.sendNavEventUpdate('month');
} else {
this.selectedMenuLeft = 'yearButton';
this.navService.sendNavEventUpdate('year');
}
}
Hope This Will Work For You

Answer 3

You could do it by two-way binding to ngModel directive.
Controller
menuLeftMobile: Array<string> = ['Monat', 'Jahr'];
selected: string;
onChange() {
if (selected === 'Monat') {
this.selectedMenuLeft = 'monthButton';
this.navService.sendNavEventUpdate('month');
} else {
this.selectedMenuLeft = 'yearButton';
this.navService.sendNavEventUpdate('year');
}
}
Template
<select class="upload_slc" required title="" [(ngModel)]="selected" (change)="onChange()">
<!-- Options -->
<option value="content" *ngFor="let navValue of menuLeftMobile" [value]="navValue">
{{ navValue }}
</option>
</select>
Now you don't need the additional variables selectedMenuLeft to set the class. You could use the selected in the template.
<div [ngClass]="{'active': selected === 'Monat'}"></div>