import { Component, HostBinding, HostListener } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {

  @HostBinding('tabIndex') tabIndex:string;//tabIndexを付与するため、ComponentにtabIndexをバインドするメンバを用意
  constructor() {
    this.tabIndex="0";//TabIndexを付与。これをしないとフォーカスできないのでコンポーネントに対するキーイベントを取得できない。
  }
  @HostListener('keyup',['$event'])//対応するイベントを第一引数に、その結果を渡す引数名を第二引数に指定
  onKeyUp(event:any) { //イベント取得時の処理を記述。メソッド名は自由。
    console.log(event);
  }
}

/*
見やすくするためだけのCSSなので消してもOK
*/
p {
  background-color:#0000ff;
  height:100px;
}
:host {
  display:block;
  background-color:#ff0000;
  height:400px;
}