In this code i am not able to console the selected dropdown in console.
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)
}
You can not add change event to ul tag, you need change ul/li tag to select/option tag. And you should distint between selectedDay and listSelectedDay variable.
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);
}
}
May be You can use button for that code for e.g
----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>