How to bind keydown event with li tag in Angular2?

Question

using (click)="onSelect(hero), I can bind the click event of the tag li. I can also bind a mouseovertag event li. But I can not bind to the keydowntag event li. propety lisupports click,mouseover,keydown, so I can use the event keydown(down arrow) to go to the next item in this list.

Where can I find official documents?

    <div class = "body-container">
        <ul class = "heroes">
            <li *ngFor = "let hero of heroes" (click)="onSelect(hero)" (keydown)="onKeydown()" (mouseover)="onKeydown()" class="bl-list-item" [class.bl-list-item-checked]="hero === selectedHero">
                <div class="guide-label">
                    <span style="width:50px" [class.fa-check]="hero === selectedHero" [class.li-fa-check]="hero === selectedHero"></span>
                    <div class="guide-code-column">{{hero.id}}</div>
                    <div class="guide-name-column">{{hero.name}}</div>
                </div>
            </li>
        </ul>
    </div>

    export class SearchComponent {
        heroes: Hero[] = [];
        selectedHero: Hero;

        constructor(private heroService: HeroService) { }

        ngOnInit(): void {
            this.heroService.getHeroes()
            .then(heroes => this.heroes = heroes);
        }

        showDialog = false;

        onSelect(hero: Hero): void {
            this.selectedHero = hero;
        }

        onKeydown(): void {
            console.log("onKeydown");
        }
     }

Answer 1

Basically, you start with an event type, and then add a series of dot-delimited modifiers. For instance:

-, . KeyEventsPlugin keydown keyup, . ( ) - , "document:" "window:". -. , , ( $event.preventDefault()).

keydown.a
keydown.b
keydown.c
keydown.dot
keydown.Spacebar
keydown.meta.Enter
keydown.alt.Enter
keydown.control.Enter
keydown.shift.Enter
keydown.meta.o
keydown.meta.s
keydown.meta.f
keydown.escape

" ":

meta - Command Mac Windows Windows. , :

- "". Dot - .

  <input
    (keydown.Enter)="handleKeyEvent( $event, 'Enter' )"
    (keydown.alt.Enter)="handleKeyEvent( $event, 'ALT + Enter' )"                                   (keydown.control.Enter)="handleKeyEvent( $event, 'Control + Enter' )"
    (keydown.meta.Enter)="handleKeyEvent( $event, 'Meta + Enter' )"
    (keydown.shift.Enter)="handleKeyEvent( $event, 'Shift + Enter' )"
    (keydown.Escape)="handleKeyEvent( $event, 'Escape' )"
    (keydown.ArrowLeft)="handleKeyEvent( $event, 'Arrow Left' )"
    (keydown.ArrowUp)="handleKeyEvent( $event, 'Arrow Up' )"
    (keydown.ArrowRight)="handleKeyEvent( $event, 'Arrow Right' )"
    (keydown.ArrowDown)="handleKeyEvent( $event, 'Arrow Down' )"
 autofocus>

Answer 2

, tabindex >= "0".

. Capture key ( keydown) DIV

, (window:keydown)="onKeydown($event)", , .