Issue with escaping dialog in Bootstrap using the ESC key

My dialog is not responding to the escape key, any ideas on what could be causing this issue?

<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>
htmlcsstwitter-bootstrapangular

Answer №1

Not quite sure why it's not functioning properly, but one workaround is to establish a listener within a 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);
        }
    }
}

Additionally, in the component file:

.... (onEsc)=close()....

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

html The "download" attribute causing a new tab to open rather than initiating a

I have a website built with Angular 4, where users can download images from an Amazon S3 bucket. However, I encountered an issue wherein instead of downloading the image, it opens in a new tab. I've tested this problem on different browsers such as Fi ...

htmlangularimagedownload

The Step-by-Step Guide to Deselecting an Angular Checkbox with a Button

I currently have a situation where I have three checkboxes labeled as parent 1, parent 2, and parent 3. Initially, when the page loads, parent 1 and parent 3 are checked by default, while parent 2 is unchecked. However, when I manually check parent 2 and c ...

javascriptangularbuttoncheckboxunchecked

What is the most efficient way to transfer data between components that are replaced by another component and then back again in Angular 2?

Expressing the issue succinctly was a bit challenging, so here is a more detailed explanation: Imagine having a screen that allows you to filter rocketships using various filters, denoted as F. These filters can take different forms - radio buttons, input ...

angular

Customize Timevis by adjusting the font size with your own CSS styling

I am looking to create a timevis plot where the font size varies based on the importance of each variable. While I can change the font color using the 'style' option in the source data frame, attempting to adjust the font size in the same manner ...

htmlcssrshiny

Tips for rectifying a two-dimensional array mapping issue in TypeScript

I am currently working with Angular and facing an issue with multidimensional arrays in my typescript code. Specifically, the line this.selectedPartyCandidate = this.mappedSenateCandidates.map(_ => 0); //has issues is causing an error while this.select ...

angulartypescriptmultidimensional-array

Tips for creating a cookie for an alternate website upon launching a new browser tab

Hey there, I'm facing an issue that I could really use some help with. To give you some context, I'm working on a project using Angular and TypeScript. My goal is to implement single sign-on functionality for multiple websites within one applica ...

javascriptnode.jsangulartypescriptcookies

Middle position of the rotating display

Currently working on a shop's image carousel where I'm implementing scroll-snap-type: x mandatory; for the container and scroll-snap-align: center; for the images. However, running into a challenge where the container sometimes exceeds the width ...

htmlcss

Avoiding HTML (JSX) tag duplication in React Component

Having the same code in my React component multiple times is becoming repetitive and inefficient. Is there a way to follow the DRY principle and avoid repeating this code? While creating a landing page with Sass styling, I noticed that I am duplicating t ...

javascripthtmlreactjsjsx

"Get a glimpse of the brackets image with real-time live

I seem to be encountering a strange issue. I have double-checked the source code for my image, and when I view the page in Chrome without using Brackets, the image displays properly. However, when I use Brackets Live preview, the image does not show up i ...

htmlcssadobe-brackets

Issues with the daterange filter in Angular SlickGrid causing functionality problems

Within Angular SlickGrid, I have implemented two date columns where the values are derived from a specific class. These columns correspond to two date fields within this class. My intention is to represent these values in dateTimeShortIso format and apply ...

angularangular-slickgrid

Receiving a BAD REQUEST error when trying to retrieve the address, resulting in an empty string being returned

views.py: from django.shortcuts import render from geopy.geocoders import Nominatim from django.http import JsonResponse Create your views here. def single_address(request): if request.method == 'POST': #print(request) addres ...

pythonhtmldjangoviewrequest

Convert HTML table data to JSON format and customize cell values

Hey there, I have a HTML table that looks like this: <table id="people" border="1"> <thead> <tr> <th>Name</th> <th>Places</th> <th>Grade</th> </tr> & ...

javascriptjqueryhtmljsonhtml-table

Modifying the parent directive's DOM in response to an event triggered by the child directive

I need help figuring out how to implement a custom radio-buttons list directive in the correct way. Imagine I want to create a directive like this: <my-radio-button-list> <my-radio-button> ...Some HTML content... </my-radio ...

javascripthtmlangularjsdomangular-directive

How can I use CSS to hide an image when a different image or item is clicked?

I have a task that needs to be completed, and I want to achieve it without using jQuery. I came across a functioning example, but when I tried to implement it myself, the image would not hide as desired. Here is the portion of CSS code that is supposed to ...

htmlcssimagehidetarget

Developing an animated feature that displays a dynamic count up to the current size of the browser window

I have a script that's able to determine the height and width of my browser window. However, I am facing a challenge in creating a way for these dimensions to count up from zero to their current values upon loading. The desired functionality would be ...

javascriptjqueryhtmlcss

CSS 3 - Apply transition to the 'display' property

I have a question about using the transition effect in conjunction with the display property: Currently, I am testing on Safari. input.input_field { display:none; transition-property: display; transition-duration: 2s; -webkit-transition-p ...

htmlcsssafaritransition

Images in Android webview disappearing after first load

When it comes to loading a local HTML file with local images into a WebView on Android, everything seems to work fine on emulators and newer devices. However, I encountered an issue with a much older device running Android 2.3.4. Initially, the images disp ...

javajavascriptandroidhtmlwebview

Implementing a pop-up notification at the center of the display for empty fields

I am currently working on a task that requires me to display a pop-up message at the top-middle of the screen stating "please fill in all fields before submitting". This custom box should be stylable using CSS. Although the solution seems simple, I am str ...

javascripthtmlcsspopupwindow

Changes made in the Firestore console do not automatically activate the snapshotChanges subscription

I'm facing an issue with subscribing to a document in Firestore using AngularFire. Even after making changes to the document through the Firestore console, I don't see any updates reflected in the pulled data, even after refreshing locally. The D ...

angulartypescriptgoogle-cloud-firestoreangularfire2

Creating a circular shape that adjusts to different screen sizes using only CSS

Is there a way to create perfect circles using only CSS without them turning into ovals when using percentage values for height? ...

htmlcss