html - bootstrap dialog esc key not working -

this dialog, esc key not working, have ideas might wrong ?

<div *ngif="visible" class="overlay">     <div role="dialog" class="overlay-content" tabindex="-1">         <div class="modal-dialog" [ngclass]="{'wide-modal-dialog': widecontent}" >             <!-- modal content-->             <div class="modal-content">                 <div class="modal-header" *ngif="header.length > 0">                     <button type="button" class="close" (click)="close()" data-dismiss="modal">&times;</button>                     <h4 class="modal-title">{{ header }}</h4>                 </div>                 <div class="modal-body">                     <ng-content></ng-content>                 </div>                 <div class="modal-footer footer-buttons">                     <button type="button" class="btn btn-default" [disabled]="positivedisabled" (click)="confirm()">{{ positivebtnlabel }}</button>                     <button type="button" class="btn btn-default" (click)="close()">{{ negativebtnlabel }}</button>                 </div>             </div>         </div>     </div> </div> 

i not sure why doesn't work, can set listener in directive:

@directive({     selector: '[onesc]' }) export class clickoutsidedirective {     constructor(private elementref: elementref) {     }      @output()     onesc = new eventemitter<event>();      @hostlistener('window:keydown', ['$event'])     onkeydown(event: keyboardevent): void {         if (event.keycode === 27) {             this.onesc.emit(event);         }     } } 

and in component:

.... (onesc)=close()....