Escape Function Doesn't Get Called When Close FullScreen in Angular

Question

I have a problem when i try to press the esc function so that the fullscreen of my app will close. The fullscreen and close fullscreen already works. But the problem is when i'm currently in fullscreen mode and i try to click the esc, it closes the fullscreen but the word "Open" is still being shown. Please see my codes below. Please click also my stackblizk link here https://stackblitz.com/edit/fullscreen-closefullscreen?file=src%2Fapp%2Fapp.component.ts

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    this.closeFullscreen();
  }


<ul class="navbar-nav">
    <li class="nav-item mr-2  d-none d-lg-block">
        <a *ngIf="toggleClass === 'ft-maximize'" href="javascript:;" class="nav-link" (click)="openFullscreen()">
            Open
        </a>
        <a *ngIf="toggleClass === 'ft-minimize'" href="javascript:;" class="nav-link" (click)="closeFullscreen()">
            Close
        </a>
    </li>
</ul>

Answer 1

Not sure you can fix this issue. I have some case same with you and I fix by @HostListener like below.

@HostListener('document:fullscreenchange', ['$event'])
@HostListener('document:webkitfullscreenchange', ['$event'])
@HostListener('document:mozfullscreenchange', ['$event'])
@HostListener('document:MSFullscreenChange', ['$event'])
fullscreenmode(){

    if(this.toggleClass == 'ft-minimize'){
      this.toggleClass = 'ft-maximize';
    }
    else{
      this.toggleClass = 'ft-minimize';
    }
    console.log(this.toggleClass)
 }

Demo: https://stackblitz.com/edit/fullscreen-closefullscreen-qbickg?file=src/app/app.component.ts