Working with OnBlur and Focus Events

Blur: It specifies the actions to perform when element looses the focus.

Focus specifies the action to perform when element get focus.

Cut, Copy, Paste 

Specifies action to perform on cut, copy and paste functionality.

Example

Add a new component

ng g c eventsample6

ScreenShot

.ts changes

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

@Component({

  selector: 'app-eventsample6',

  templateUrl: './eventsample6.component.html',

  styleUrls: ['./eventsample6.component.css']

})

export class Eventsample6Component {

public txtName:any;

public msg:any;

public status:any;

public onBlur() {

  this.msg='';

  this.txtName=this.txtName.toUpperCase();

}

public onFocus()

{

  this.msg="Removed and Placed onto Clip Board";

}

public onCopy()

{

  this.status="Copied to ClipBoard";

}

public onPaste()

{

  this.status="Inserted from ClipBoard";

}

}

ScreenShot

.html changes

<div class="container">

    <h2>User Details</h2>

    Name:

    <input (focus)="onFocus()" (blur)="onBlur()"

    (copy)="onCopy()"

    (paste)="onPaste()" type="text"

    [(ngModel)]="txtName">

    <span> {{msg}}</span>

    <br/>

    <div class="text-center">

        {{status}}

    </div>

</div>

Next make changes on appmodule.ts and Index.html as shown in the previous examples

Output