How to console selected dropdown option using <ul> <li>-CodePudding

In this code i am not able to console the selected dropdown in console.

HTML

<div ><button type="button"  data-bs-toggle="dropdown">
        Dropdown
    </button>
    <ul  (change)="selectChangeHandler($event)">
        <li  *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)
 }

CodePudding user response：

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 >
  <button
    type="button"
    
    data-bs-toggle="dropdown"
  >
    Dropdown
  </button>
  <select  (change)="selectChangeHandler($event)">
    <option  *ngFor="let option of listSelectedDay">
      {{ option }}
    </option>
  </select>
</div>

export class AppComponent {
  listSelectedDay = ['GCP', 'Azure', 'AWS'];
  selectedDay = '';
  selectChangeHandler(event: any) {
    this.selectedDay = event.target.value;
    console.log(this.selectedDay);
  }
}

Demo code https://stackblitz.com/edit/angular-ivy-tapafd

CodePudding user response：

May be You can use button for that code for e.g

----HTML----

<div >
      <button  type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
      <ul  aria-labelledby="dropdownMenuButton1" name="selected" >
      <li><a  data-bs-toggle="modal" *ngFor="let option of Menu">
      <button  type="button" (click)="selectedChanged(option)">{{option}}</button>
       </a></li>
  </ul>
</button>