how to prevent propagation of the same event in different components in angular with HostListener?

Solution for how to prevent propagation of the same event in different components in angular with HostListener?
is Given Below:

I have two components, and they both are listening to keyboard inputs. If in one of them a certain condition is met, then I want to prevent any other action happening after listening to those events. Here’s a snippet:

component 1 (an full screen overlay):

@HostListener("document:keydown", ["$event"])
public handleKeyboardEvent(event: KeyboardEvent): void {
    if (!this.isShow) {
        return;
    }
    event.preventDefault();
    event.stopPropagation();
    event.returnValue = false;
}

component 2 (a dialog):

@HostListener("document:keydown.escape", ["$event"]) 
public onEscKeyUp(e: KeyboardEvent): void {
    this.dial.close();
}

So when the overlay is showing , i don’t want the dialog to close, if that makes sense. I have that code, but it does not work.

I have figured out how to make it work:

@HostListener("document:keydown", ["$event"])
public handleKeyboardEvent(event: KeyboardEvent): boolean
{
    if (!this.isShow)
    {
        return true;
    }
    event.stopImmediatePropagation();
    return false;
}

So your second component is fine, it will only be called when the user call the escape event from the keyboard. There is a problem in the first component and when the user presses any key including escape, it will be called.

You can add a condition for escape :

@HostListener("document:keydown", ["$event"])
public handleKeyboardEvent(event: KeyboardEvent): void {
    if (!this.isShow) {
        return;
    }
     // keycode for escape
    if (event.keyCode === 27) {
        event.stopPropagation();
        return;
    }

    // as per @solar's answer
    event.stopImmediatePropagation();
    //event.returnValue = false; // why do you need this
    return false;
}