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){
console.log(event.target.value);
}
Let's see full examples now:
Example
src/app/app.component.html
<h1>Angular Textbox focus Event Example - HDTuto.com</h1>
<input type="text" (focus)="onFocusEvent($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;
onFocusEvent(event: any){
console.log(event.target.value);
}
}
I hope it can help you...
Do you like below Tutorials ?
- Angular Json Pipe Example | Json Pipe in Angular 9/8/7
- Angular Slice Pipe Example | Slice Pipe in Angular 9/8/7
- Angular Uppercase Pipe Example | Uppercase Pipe in Angular 9/8/7
- Angular LowerCase Pipe Example | LowerCase Pipe in Angular 9/8/7
- Angular Titlecase Pipe Example | Titlecase Pipe in Angular 9/8/7
- Angular KeyValue Pipe Example | KeyValue Pipe in Angular 9/8/7
- Call Method from One Component to Another Component in Angular
- Angular Push Object into Array Example