Input FocusOut Event in Angular Example

I am going to show you example of angular input focusout event example. This tutorial will give you simple example of angular textbox focusout event example. We will use input box focus out event angular. step by step explain angular input change event on focusout event. Let's get started with focus out event in angular.

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 - HDTuto.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...