Angular Input FocusOut Event Example

By Hardik Savani | May 8, 2020 | Category : Angular


This tutorial is focused on angular input change event on focusout event. if you want to see example of focus out event in angular then you are a right place. i will provide simple example of on focus out event in angular 9. you can understand a concept of angular input focusout event example. follow bellow step for angular textbox focusout event example.

In this post i will show you very simple example of onfocusout in event in angular. you can easily use focus out event in angular 6, angular 7, angular 8 and angular 9 application.

When user will key up on input box field then trigger onFocusEvent() of angular component. we will use (change) attribute for call function. let's see bellow logic code.

<input type="text" (focusout)="onFocusOutEvent($event)" />

onFocusOutEvent(event: any){

console.log(event.target.value);

}

Let's see full examples now:

Example

src/app/app.component.html

<h1>Angular Textbox Focus Out Event Example - ItSolutionStuff.com</h1>

<input type="text" (focusout)="onFocusOutEvent($event)" />

src/app/app.component.ts

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

@Component({

selector: 'my-app',

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

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

})

export class AppComponent {

name = 'Angular ' + VERSION.major;

onFocusOutEvent(event: any){

console.log(event.target.value);

}

}

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: