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 )
Program Flow
- Initiate focus variable as false
- (focus) : Set true to the focus variable
- (blur) : Set false to the focus variable
- 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; }
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