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

2 comments:

  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
  2. I am very happy after visiting your website with very useful information. I am from one of the digital marketing agency... To visit my agency click on link Visitdigitalguru

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts