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

Markup

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

Script - app.component.ts

import { Component } from '@angular/core';
@Component({
  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">
    {{myFocusVar}}
  </div>
  `
})
export class AppComponent {
  myFocusVar: boolean = false;
}

0 comments:

Blogroll

Follow this blog by Email

Popular Posts