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
ReplyDeleteI 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