Preventing Bootstrap modal from closing when clicking outside of the modal in Angular 4

I'm working with Angular 4 and trying to prevent the model from closing when I click outside of it. Below is the code snippet I am using:

<div id="confirmTaskDelete" class="modal fade" [config]="
{backdrop: 'static', keyboard: false}" role="dialog" 
style="z-index:999999">
    <div class="modal-dialog modal-width">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-
dismiss="modal" aria-label="Close" #closeTaskPopUpbtn>
                    <span aria-hidden="true">×</span>
                </button>
                <h3 class="modal-title modal-title-
color">Are you sure you want to delete this task?</h3>
                <div class="text-p" style="margin-
top:53px;margin-bottom:35px;"></div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-
primary" id="deletebtn" data-dismiss="modal" >OK</button>
                <button type="button" class="btn btn-
primary" data-dismiss="modal" >Cancel</button>
            </div>
        </div>
    </div>
</div>

However, I encountered an error message:

Error: Can't bind to 'config' since it isn't a known property of 'div'.

Answer №1

Utilizing the attributes data-keyboard and data-backdrop

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<div id="exampleModal" class="modal fade"  role="dialog" style="z-index:999999" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-width">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data- dismiss="modal" aria-label="Close" #closeTaskPopUpbtn>
                    <span aria-hidden="true" data-dismiss="modal">×</span>
                </button>
                <h3 class="modal-title modal-title-color">Are you sure you want to delete this task?</h3>
                <div class="text-p" style="margin-top:53px;margin-bottom:35px;"></div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="deletebtn" data-dismiss="modal">OK</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

View the Stackblitz Demo

Answer №2

To properly implement this functionality, ensure that you include the directive and template reference variable within the div tag.

  <div id="confirmTaskDelete" class="modal fade"  
        bsModal #confirmTaskDelete="bs-modal" //<===========remember to add this line
        [config]="{backdrop: 'static', keyboard: false}" 
        role="dialog" 
        style="z-index:999999">

The remaining HTML code is functioning correctly.

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

Include a control within a form based on the Observable response

I am looking to enhance my form by adding a control of array type, but I need to wait for the return of an Observable before mapping the values and integrating them into the form. The issue with the current code is that it inserts an empty array control e ...

Restrict the scope of 'unknown' to an object containing only a string-field without resorting to 'any'

Currently, I am working on validating the data that is being received by my application. To illustrate, consider the following scenario: function extractField(data: unknown): string { if (typeof data !== 'object') { throw new Error(& ...

calculating the dynamic height of a document from top to bottom using Angular

Is there a way to dynamically calculate the height of each page from top to bottom in Angular? The syntax that works in JavaScript seems to give an error in Angular. console.log( (document.height !== undefined) ? document.height : document.body.offsetHeigh ...

Angular input range slider that automatically rounds decimal values from the data bindings

I've implemented a range slider within an Angular form to capture and display recorded values. <input [formControlName]="object.id" [id]="object.id" type="range" [(ngModel)]="object.answer" [step]="objec ...

A guide to accessing another component's config.ts file in Angular

After following the steps outlined in this tutorial, I successfully created a reusable modal component. However, when trying to personalize it, I encountered an issue where the modal appeared as an empty box and displayed the error ERROR TypeError: ctx_r1. ...

What is the most effective method for incorporating JWT authentication in Angular (Client Side) without relying on Local Storage?

I recently encountered a challenge while attempting to implement JWT token for Angular Authentication on the client side. I have been searching for alternative methods of storing the jwt token beside local storage, but haven't found a suitable impleme ...

Utilizing a foundational element to automatically unsubscribe from multiple observable subscriptions

Within our Angular application, we have implemented a unique concept using a Base Component to manage observable subscriptions throughout the entire app. When a component subscribes to an observable, it must extend the Base Component. This approach ensures ...

Angular, perplexed by the output displayed in the console

I'm completely new to Angular and feeling a bit lost when it comes to the console output of an Angular app. Let me show you what I've been working on so far! app.component.ts import { Component } from '@angular/core'; @Component({ ...

Issues arise with Angular build when argon2 or bcrypt libraries are included from npm

Currently, I am working on an Angular project where I have integrated the argon2 library for password encryption. While the backend implementation is running smoothly, my Angular frontend application has started to malfunction. I am encountering a long li ...

"Enhance your web development with TypeScript and react-select

I find myself in a peculiar predicament. Currently, I am immersing myself in learning TypeScript and here is a brief overview of what transpired so far: const [selectedBankCode , setSelectedBankCode] = useState<string | undefined>(); const [selecte ...

Transitioning from Angular 8 to Angular 9 - troubleshooting hurdles

After diligently following the official documentation to update my Angular app, I encountered several errors when running ng serve. ERROR in app/src/app/users/add/add.component.html:14:48 - error NG2345: Argument of type 'AbstractControl' is not ...

I encountered an issue while attempting to retrieve data using route parameters. It seems that I am unable to access the 'imagepath' property as it is undefined

Is there a way to access data when the page loads, even if it is initially undefined? I keep getting this error message: "ERROR TypeError: Cannot read properties of undefined (reading 'imagepath')". How can I resolve this issue? import { Compone ...

How can I eliminate the hover effect from a div element?

I am facing an issue with implementing a zoom effect on hover for my list of products. When I do a long press on a product, it works the first time but not the second time. I suspect this is because the div remains in a hover state. I want to ensure that ...

Error: Trying to access a property that is not declared on an empty object

Using a fully patched Visual Studio 2013, I am integrating JQuery, JQueryUI, JSRender, and TypeScript into my project. However, I am encountering an error in the ts file: Property 'fadeDiv' does not exist on type '{}'. While I believ ...

Actions in ASP Core to automatically install necessary tools for Angular2 before and after publishing, followed by the build

Our .NET Core project utilizes Angular2 as the frontend client, housed in a Frontend directory within our solution. The Frontend directory includes package.json and angular-cli.json to keep frontend separate from the rest of the .NET project. When ng buil ...

Show the CustomError message and HTTP status code that was raised by the server in the HttpErrorResponse

I am in the process of developing an ASP.NET Core API server paired with an Angular client. One of my main objectives is to ensure that the client can effectively capture any exceptions thrown by the server. I have implemented an HTTP Interceptor in Angula ...

Creating a custom Angular pipe to convert milliseconds to a formatted hh:mm:ss in Angular

Struggling to develop an Angular pipe that accurately converts milliseconds to hh:mm:ss format. Despite researching several articles, none of the solutions seem to work. Here is a snippet of the current pipe.ts implementation: transform(value) { le ...

Workspace Settings cannot be saved due to an unregistered configuration

I've been attempting to change the StatusBar color in VScode Setting.json using Configuration and Workspace. However, I encountered an error when trying to make the update: Error: Unable to write to Workspace Settings because workbench.colorCustomizat ...

Issue with Angular and SCSS: Rgba function does not properly interpret HEX value

Attempting to retrieve the background color of the Angular theme, I encounter an issue where it is represented in HEX format and needs transparency added. This is how the variable is defined: :root { --opacity: .15; --primary: #4caf50; --accen ...

problem with arranging sequences in angular highcharts

I am facing an issue with sorting points in different series using highcharts. To illustrate my problem, consider the following example series: [ {name: 'series one', value: 5 values}, {name: 'series two', value: 10 values} ] When usin ...