En este código, no puedo consolar el menú desplegable seleccionado en la consola.
HTML
<div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Dropdown </button> <ul class="dropdown-menu" (change)="selectChangeHandler($event)"> <li class="dropdown-item" *ngFor="let option of selectedDay">{{option}}</li> </ul> </div>``` TS. selectedDay = ['GCP','Azure','AWS']; selectChangeHandler(event: any) { this.selectedDay = event.target.value; console.log(this.selectedDay) }No puede agregar un evento de cambio a la etiqueta ul, necesita cambiar la etiqueta ul/li a la etiqueta de selección/opción. Y debe distinguir entre la variable selectedDay y listSelectedDay.
HTML
<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" > Dropdown </button> <select class="dropdown-menu" (change)="selectChangeHandler($event)"> <option class="dropdown-item" *ngFor="let option of listSelectedDay"> {{ option }} </option> </select> </div>TS
export class AppComponent { listSelectedDay = ['GCP', 'Azure', 'AWS']; selectedDay = ''; selectChangeHandler(event: any) { this.selectedDay = event.target.value; console.log(this.selectedDay); } }Código de demostración https://stackblitz.com/edit/angular-ivy-tapafd
Puede ser Puede usar el botón para ese código, por ejemplo
----HTML----
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1" name="selected" > <li><a class="dropdown-item" data-bs-toggle="modal" *ngFor="let option of Menu"> <button class="btn btn-secondary" type="button" (click)="selectedChanged(option)">{{option}}</button> </a></li> </ul> </button>