Input Focus Event in Angular Example

This article will provide example of angular input focus event example. if you have question about angular textbox focus event example then i will give simple example with solution. Here you will learn input box focus event angular. i would like to share with you angular input change event on focus event. you will do the following things for focus event in angular.

In this post i will show you very simple example of onfocus in event in angular. you can easily use focus 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" (focus)="onFocusEvent($event)" />

onFocusEvent(event: any){



Let's see full examples now:



<h1>Angular Textbox focus Event Example - HDTuto.com</h1>

<input type="text" (focus)="onFocusEvent($event)" />


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


selector: 'my-app',

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

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


export class AppComponent {

name = 'Angular ' + VERSION.major;

onFocusEvent(event: any){




I hope it can help you...

May 16, 2020 | Category : Angular

Blog Search