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; }
0 comments:
Post a Comment