Block ALT key globally in Angular

I'm trying to block the ALT from being used in all Input fields for my Angular app. Here is what I have tried.

In the app.component adding the following:

@HostListener('document:keyup', ['$event'])
public handleKeyboardEvent(event: KeyboardEvent): void {
    const keycode = event.key;

    if (event.altKey ||
        keycode.toLowerCase() == 'alt' ||
        event.altKey === true ||
        event.code == Constants.KeyCodes.AltRight ||
        event.code == Constants.KeyCodes.AltLeft) {
        event.returnValue = false;
        event.preventDefault();
        return;
    }
}

This code fires properly, however it does not prevent the Alt key combination from stopping. For instance press Alt + 5 and you get ♣. The strange thing is that if I add a breakpoint and step through the code it works, so it's like some weird timing issue.

I took the same code and added it to a service and called it from the app.component like the following:

fromEvent(document, 'keyup').subscribe((event: KeyboardEvent) => {
        this.utilityService.altKeyBlocking(event);
})

fromEvent(document, 'keydown').subscribe((event: KeyboardEvent) => {
        this.utilityService.altKeyBlocking(event);
})

The only thing that seems to work is creating a Directive and adding it to every Input field in the entire application using the exact same code.

Thoughts on other things I can try to implement this globally. Peace.