How to bind to keydown event of li tag in Angular2?
<p>using <code>(click)="onSelect(hero)</code>, I can bind to click event of <code>li</code> tag.
I can also bind to <code>mouseover</code> event of <code>li</code> tag.
But I can't bind to <code>keydown</code> event of <code>li</code> tag.
<code>li</code> tag supports <code>click,mouseover,keydown</code> propety, so I think I can use <code>keydown</code> event(down arrow) to navigate to the next item in this list box.</p>

<p>Where is the official docs I can look for?</p>

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

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

        constructor(private heroService: HeroService) { }

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

        showDialog = false;

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

        onKeydown(): void {
            console.log("onKeydown");
        }
     }
</code></pre>