How to bind to user input events to component event handlers?

Most of the DOM events are triggered by user input and bind to these events provides a way to get inputs from a user.

The following example shows a click event binding – [on-click.component.ts]

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

@Component({

  selector: 'app-on-click',

  templateUrl: './on-click.component.html',

  styleUrls: ['./on-click.component.css']

})

export class OnClickComponent implements OnInit {

  welcomeMsg = '';

  constructor() { }

  ngOnInit() { }

  onClick() {

    this.welcomeMsg = 'Welcome you, Anil!';

  }

}

And on-click.component.html -

<div class="msg">

  <button (click)="onClick()">Click Me!</button>

  <p>

    {{welcomeMsg}}

  </p>

</div>

OR

<!-- Canonical form, the (on-) prefix alternative -->

<div class="msg">

  <button on-click="onClick($event)">Click Me!</button>

  <p>

    {{welcomeMsg}}

  </p>

</div>

When the user clicks the button, Angular calls the onClick method from OnClickComponent.

For more detail kindly refer the link https://www.code-sample.com/2018/05/angular-6-7-documentation-and-examples.html