Angular Change event of drop down list not working

Question

I want to display a message to the console when I select a different value from the drop down list using . But this is not happening. Nothing happens when I select another value from the drop-down list. How do I fix this. I'm using a distric array to add the drop down list values using a key-value pair in HTML.

typescript part

  selectedDistrict:any=[];
 distric=[{
   "key":"Colombo",
   "value": "1"
 },
 {
   "key":"Gampaha",
   "value":"2"
 }
 
]

 public districtChange(){
   
console.log("successs");

}

HTML

<div class="form-group">
                       <span>Select District: </span>
                       <select name="district">
                           <option *ngFor="let user of distric" value={{user.value}} (change)="districtChange()">{{user.key}}</option>
                       </select>

                      
                   
                    </div>

Answer 1

put change to select you are changing select's value not option's value

<div class="form-group">
    <span>Select District: </span>
     <select name="district"(change)="districtChange()">
          <option *ngFor="let user of distric" value={{user.value}} >{{user.key}}</option>
     </select>
 </div>