How to add onchange event on dropdown in angular

How to add onchange event on dropdown in angular, Read More !!!

To prevent page refresh while performing the onchange event on dropdown in angular set,

 onclick="return false"

as false.

Here is the output.

Component code

<div class="col-lg-6">
    <div class="row">
      <div class="col-12 pt-0 pb-2" style="background-color: #e9e6e6">
        <div class="row mt-2">
          <div class="col-6 text-left">
            <div class="dropdown">
              <button
                class="btn btn-secondary dropdown-toggle"
                type="button"
                id="dropdownMenuButton"
                data-toggle="dropdown"
              >
              Gujarat
              </button>
              <div class="dropdown-menu">
                <a
                  class="dropdown-item"
                  href="#"
                  *ngFor="let DisplayName of StateName"
                  onclick="return false"
                  (click)="onProjectChange($event)"
                  >{{ DisplayName }}</a
                >
              </div>
            </div>
          </div>
      
        </div>
      </div>
      <div
      class="col-11 mx-auto mt-1 text-white text-center pt-2 pb-2 mx-auto rounded font-weight-bold"
      style="background-color: #718d97; font-family: 'Arial Narrow'"
    >
    State Inforamtion
    </div>
    <div class="col-12">
      <table class="table table-borderless">
        <tr>
          <td>State Name</td>
          <td> 
            <span [ngSwitch]="DisplayName">
            <span *ngSwitchCase="'Gujarat'" style="color:hotpink">{{
                DisplayName
            }}</span>
            <span *ngSwitchCase="'Rajasthan'" style="color: blue">{{
                DisplayName
            }}</span>
            <span *ngSwitchCase="'Punjab'" style="color: red">{{
                DisplayName
            }}</span>
            <span *ngSwitchDefault style="color: chartreuse">{{
                DisplayName
            }}</span>
          </span>
        </td>
        </tr>       
      </table>
     
    </div>
</div>
</div>

Typescript file code

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-prac-task',
  templateUrl: './prac-task.component.html',
  styleUrls: ['./prac-task.component.scss']
})
export class PracTaskComponent implements OnInit {
  StateName: string[] = [];
  DisplayName: string = "";
  constructor() { }

  ngOnInit(): void {
    this.StateName = ['Gujarat', 'Rajasthan', 'Punjab', 'Haryana'];
  }
  onProjectChange($event: any)
  {
    console.log($event.target.innerHTML.trim());
    if ($event.target.innerHTML.trim() == "Gujarat")
    {
      this.DisplayName = "Gujarat";
   
    } else if ($event.target.innerHTML.trim() == 'Rajasthan')
    {
      this.DisplayName = "Rajasthan";
    
    } else if ($event.target.innerHTML.trim() == 'Punjab')
    {
      this.DisplayName = "Punjab";
      
    } else if ($event.target.innerHTML.trim() == 'Haryana')
    {
      this.DisplayName = "Haryana";
     
    }
  }
}