We can make use of Angular directives to make use of this functionality. AngularJS provides focus ( Trigger event when input got focus ),  blur ( Trigger event when input lost focus )
Source Code          DEMO

Program Flow

  1. Initiate focus variable as false
  2. (focus) : Set true to the focus variable
  3. (blur) : Set false to the focus variable
  4. Use focus variable to check focus


Observe below focus and blur events
<input  (focus)="myFocusVar = true" (blur)="myFocusVar = false"/>

Script - app.component.ts

import { Component } from '@angular/core';
  selector: 'my-app',
  template: `
  <h4>Focus and UnFocus below Text filed</h4>
  <input  (focus)="myFocusVar = true" (blur)="myFocusVar = false"/><br>
  <h4>Focus result</h4>
  <div class="red">
export class AppComponent {
  myFocusVar: boolean = false;



Follow this blog by Email

Popular Posts