HTML mouse event onclick is not working in simple Angular project

Question

I am new to Angular framework. And I am trying to create a simple button in app.components.html file that after clicking on it will take me to a function declared in app.component.ts file. When I used (click) event attribute everything worked fine but When I used onclick HTML event, it is not working.

app.component.html is a HTML file then why HTML mouse events are not working here? Someone please help here. app.component.html file -

<input type="button" value="Click Me" onclick="getName('AAKASH')"/>

app.component.ts file -

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
// We can declare properties here
export class AppComponent {
  title = 'blog';

  getName(name) {

    alert(
      "button has been clicked" + name + " " 
    )

  }
}

Answer 1

Html mouse events are not present in Angular. In Angular, names of HTML mouse events are different from html. We can refer this link to list all the mouse events in Angular -https://dev.to/orahul1/angular-mouse-events-41l9