close

How to use onBlur event on Angular2?

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to use onBlur event on Angular2? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to use onBlur event on Angular2 ?

  1. How to use onBlur event on Angular2 ?

    to use onBlur event on Angular2 you can use directly (blur) event in input tag.
    <div> <input [value]="" (blur)="result = $event.target.value" placeholder="Type Something"> {{result}} </div>
    and you will get output in “result

  2. How to use onBlur event on Angular2 ?

    to use onBlur event on Angular2 you can use directly (blur) event in input tag.
    <div> <input [value]="" (blur)="result = $event.target.value" placeholder="Type Something"> {{result}} </div>
    and you will get output in “result

Method 1

You can also use (focusout) event:

Use (eventName) for while binding event to DOM, basically () is used for event binding. Also you can use ngModel to get two way binding for your model. With the help of ngModel you can manipulate model variable value inside your component.

Do this in HTML file

<input type="text" [(ngModel)]="model" (focusout)="someMethodWithFocusOutEvent($event)">

And in your (component) .ts file

export class AppComponent { 
 model: any;
 constructor(){ }

 /*
 * This method will get called once we remove the focus from the above input box
 */
 someMethodWithFocusOutEvent() {
   console.log('Your method called');
   // Do something here
 }
}

Method 2

you can use directly (blur) event in input tag.

<div>
   <input [value]="" (blur)="result = $event.target.value" placeholder="Type Something">
   {{result}}
</div>

and you will get output in “result

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment