capslock.directive.ts

import {Directive, OnInit, HostListener, Output, EventEmitter} from "@angular/core";

@Directive({
    selector: '[capsLockDetect]'
})
export class CapsLockDetectDirective implements OnInit{
    @Output() capsLockOn = new EventEmitter<number>();
    capslock:number = 0;
    constructor(){}

    ngOnInit() {
    }

    @HostListener('keyup', ['$event'])
    onKeyUp(event: KeyboardEvent): void {
        if (event.key !== 'CapsLock') {
            if (event.getModifierState('CapsLock')) {
                this.capsLockOn.emit(1)
                this.capslock = 1;
            } else {
                this.capsLockOn.emit(2);
                this.capslock = 2;
            }
        } else if (event.key === 'CapsLock' && this.capslock !== 0) {
            if (this.capslock === 1) {
                this.capsLockOn.emit(2);
                this.capslock = 2;
            } else {
                this.capsLockOn.emit(1);
                this.capslock = 1;
            }
        }
    }
}