Clever Geek Handbook

Detect and warn users about blocking blocking

How to implement detecting and warning users when lid lock is enabled (or not) in tooltip in typescript (angular 4.2.2)? Maybe with some keyup events or like toUpperCase()

in JS.

+4


source to share


2 answers


Write a directive and add a listener. Add it to your main component wrapper div for the component to receive emits. As soon as it receives the event change, it activates the state of the property associated with the tag tag. This will help you hide and show with * ngIf the condition that is the response from your listener (via @Output for the component).

The following displays the message dynamically:

HTML:

<div (capsLock)="capsOn=$event">
  <input type="text"  >
  <label *ngIf="capsOn">Caps Locked</label>
</div>


Directive:

@Directive({ selector: '[capsLock]' })
export class TrackCapsDirective {
  @Output('capsLock') capsLock = new EventEmitter<Boolean>();

  @HostListener('window:keydown', ['$event'])
  onKeyDown(event: KeyboardEvent): void {
    const capsOn = event.getModifierState && event.getModifierState('CapsLock');
      this.capsLock.emit(capsOn);
  }
  @HostListener('window:keyup', ['$event'])
  onKeyUp(event: KeyboardEvent): void {
    const capsOn = event.getModifierState && event.getModifierState('CapsLock');
      this.capsLock.emit(capsOn);
  }
}

DEMO

+6


source


I don't think Angular can do this out of the box (AngularJS probably).

There are several libraries that can do this, but it would be worth checking out capsLock ( NPM , GitHub )

You can use an observable to check if the caps lock is enabled and then you adjust the material



capsLock.observe(function (result) {
    // Do stuff
});

Here's an example from the Github readme: https://rawgit.com/aaditmshah/capsLock/master/demo.html

0


source






More articles:


All Articles