[Fixed] How to display name of a choosen item from a list inside an alert window

Issue

i am trying to display the month’s name every time the user chooses a month fron the list.
i managed to display an alert but i want to know how can i display the name of the choosen or selected months.
i mean, when the user chooses a month the following text should appear for an example

 month choosen is April

please let me know how to achieve it

app.component.html:

<div> Months :
    <select (change) = "changemonths($event)">
    <option *ngFor="let i of months">{{i}}</option>
    </select>
</div>

app.component.ts:

months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
        "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
        
 changemonths(event) {
  alert("Changed month from the Dropdown" + event.value);
  console.log(event);
 }

Solution

Use event.target.value instead of event.value

changemonths(event) {
    alert("Changed month from the Dropdown" + event.target.value);
    console.log(event);
}

Demo : https://stackblitz.com/edit/angular-ivy-hzdewq?file=src/app/app.component.ts