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;
}

1 comment:

  1. This blog helped me a lot in understanding the Angular directives and on how to use it's functionality. The different variables that you have mentioned is very complicated and I will highly appreciate it if you will try to have a clear and concise explanation of it. I was trying to find as many information as I could regarding the topic and if you can share anything else please do so. Any updates that you will make will be highly appreciated. rushessay writers

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts