CODEWITHSUNDEEP
htmlangularangular2-templatepopover
sneha mahalank
sneha mahalank

Reputation: 167

Angular 2: ngx-popover close by hitting ESC key

I am refering this ngx-popover in component

ngx-popover Question is now how I can close the popover by hitting ESC key

Here is my code

<div style="margin-bottom: 1em;" class="comment" *ngIf="myPopover2">
                        <popover-content #myPopover2
                                         placement="left"
                                         [animation]="true"
                                         [closeOnClickOutside]="true" [ng2-draggable]="true">
                            <button class="button_close" (click)="myPopover2.hide()">
                                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                            </button>
                            <comment></comment>
                        </popover-content>
                    <button [ngClass]="{'container-element': myPopover2}" type="button" (keydown)="CloseEvent($event)" class="btn btn-labeled btn-default btn-block button_style" [popover]="myPopover2">
                        </span>
                    </button>
                </div>

Please help me

Upvotes: 0

Views: 1421

Answers (1)

Phil
Phil

Reputation: 7607

  popoverVisible: boolean = true;

  constructor(@Inject(DOCUMENT) private document) {}

  @HostListener('document:keydown', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
    if (event.keyCode === 27) { // 27===ESC
      this.popoverVisible = false;
    }
  }

and then on the popover-element: *ngIf="popoverVisible"

Upvotes: 2

Related Questions