Close on escape

Ahhoz, hogy az “esc” billentyű lenyomásával bezárd a lightbox-ot, követned kell néhány lépést:

1. HostListener hozzáadása: Importáld a HostListener-t és használd a komponensben, hogy észleld a billentyű lenyomásokat.
2. closeOnEscape metódus létrehozása: Hozz létre egy metódust, ami ellenőrzi, hogy az “esc” billentyűt nyomták-e le, és ha igen, zárja be a lightbox-ot.

Íme egy példa, hogy ez hogyan nézhet ki:

import { Component, OnInit, HostListener } from '@angular/core';
// ... többi importok ...

@Component({
  selector: 'app-album-single',
  templateUrl: './album-single.component.html',
  styleUrls: ['./album-single.component.scss'],
})
export class AlbumSingleComponent implements OnInit {
  // ... a többi változó és metódus ...

  @HostListener('document:keydown', ['$event'])
  closeOnEscape(event: KeyboardEvent): void {
    if (event.key === 'Escape' && this.selectedImage) {
      this.selectedImage = null;
      this.selectedIndex = null;
    }
  }
}

Ez a kód a document:keydown eseményhez ad egy hallgatót (listener), ami a closeOnEscape metódust hívja meg, amikor egy billentyűt lenyomnak. A metódus ellenőrzi, hogy az “esc” billentyűt nyomták-e le, és ha igen, bezárja a lightbox-ot.