退出全屏模式时不会调用 Esc 函数

Question

I have some content which I am making fullscreen.

What I want is to fire a function on pressing Esc which exits the fullscreen. Please go through the below link: https://stackblitz.com/edit/angular-zk6udf

Please Note: Kindly open the execution window in a new window by clicking in order to properly see the fullscreen mode.

In above, when I click the button it enters in fullscreen. But when I press Esc, the hidden text doesn't show up. Instead when I press Esc again, then it does that. I am using HostListener for achieving this.

How can I achieve calling a function on pressing Esc which exits the fullscreen?

Thanks.

Answer 1

Instead listen to fullscreenchange in your hostlistener:

@HostListener("document:fullscreenchange", ["$event"]) onKeydownHandler(
  event: KeyboardEvent
) {
  // has exited
  if (!document.fullscreenElement) { 
    this.showTextAfterEscape = true;
  }
}

Your STACKBLITZ