How to get user input from the $event object?

The DOM events carry all information that is useful to the component.

The following example shows to get user input from the $event – key-up.component.ts

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

@Component({

  selector: 'app-key-up',

  templateUrl: './key-up.component.html',

  styleUrls: ['./key-up.component.css']

})

export class KeyUpComponent implements OnInit {

  values = '';

  constructor() { }

  ngOnInit() { }

  //KeyUp events.

  onKeyUp(event: any) {

    this.values += event.target.value + ' : ';

  }

}

And key-up.component.html –

<div class="event">

  <button (click)="onKeyUp($event)">KeyUp Event!</button>

  <p>

    {{values}}

  </p>

</div>

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