Opening and closing a default Bootstrap modal in Angular 2

Question

Opening and closing a default Bootstrap modal in Angular 2

Instead of using angular2-bootstrap or ng2-bs3-modal as recommended in the discussions on Angular 2 Bootstrap Modal and Angular 2.0 and Modal Dialog, I want to explore other options.

I understand how the Bootstrap modal opens and closes:

The display property switches between display: none; and display: block;
An attribute toggles on the div between aria-hidden="true" and aria-hidden="false"

My initial thought was to bind to the aria-hidden attribute like this: [aria-hidden]="true", but unfortunately, I found out that I cannot bind to aria-hidden because it is not a recognized property of the div element (note: attr.aria-hidden does not exist).

It is known that with jQuery, the Bootstrap modal can be controlled with $('#myModal').modal(), as highlighted in this question: How to open a Bootstrap modal window using jQuery?

So, my question is: Is there a TypeScript function that has a similar functionality to modal() in jQuery? Or, is there a way to bind a function or variable to aria-hidden?

Here is the snippet of my current html:

<div id="createAccountModal" class="modal fade customForm" role="dialog" [aria-hidden]="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create account</h4>
            </div>
            <div class="modal-body">
               <p>Lorem ipsum</P>
            </div>
            <div class="modal-footer align-left">
                My custom footer
            </div>
        </div>
    </div>
</div

angular typescript bootstrap-modal

Answer 1

Answer №1

If you're looking to implement a modal in your Angular application, you can create a separate file called myModal.html with the following content:

<div class="modal-backdrop fade in" [style.display]="showModal ? 'block' : 'none'"></div>
  <div class="modal" tabindex="-1" role="dialog" style="display: block" [style.display]="showModal ? 'block' : 'none'">
     <div class="modal-dialog">
        <div class="modal-popup">
          <div class="popup-title">
            <span>{{title}} </span>
            <i class="icon-cancel fr" data-dismiss="modal" aria-label="Close" (click)="cancelAction()"></i>
            <p *ngIf="subTitle">{{subTitle}}</p>
          </div>
        <ng-content></ng-content>
      </div>
  </div>
</div>

Next, create a corresponding TypeScript file named myModal.component.ts:

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

const template: string = require('./myModal.html');

@Component({
   selector: 'modal',
   template
})

export class Modal implements OnInit {
  // Include necessary Input and Output properties here
  
  constructor() {}

  // Implement necessary methods for showing, hiding, and handling actions
  
}

// Define ModalAction and ModalResult interfaces
export enum ModalAction { POSITIVE, CANCEL }

export interface ModalResult {
  action: ModalAction;
}

Lastly, create a reusable module for the modal component so you can easily use it anywhere in your application. Here's an example of how you can utilize the modal:

<modal #deleteUserModal id="deleteUser"
   [show-modal]="isModalOpen"
   [title]="'Delete'"
   >
  <div class="popup-content">
    <p>Are you sure you want to delete the user permanently?</p>
  </div>
  <div class="popup-footer">
    <button class="btn cancel"  aria-label="Close" (click)="deleteUserModal.hide()">
        Cancel
    </button>
    <button type="button" class="btn btn-primary" (click)="deleteSelectedUser(deleteUserModal)" aria-label="Close">
        Delete
    </button>
  </div>
</modal>

Feel free to enhance this modal component further based on your specific requirements!

Answer 2

If you're looking to implement a modal in your Angular application, you can create a separate file called myModal.html with the following content:

<div class="modal-backdrop fade in" [style.display]="showModal ? 'block' : 'none'"></div>
  <div class="modal" tabindex="-1" role="dialog" style="display: block" [style.display]="showModal ? 'block' : 'none'">
     <div class="modal-dialog">
        <div class="modal-popup">
          <div class="popup-title">
            <span>{{title}} </span>
            <i class="icon-cancel fr" data-dismiss="modal" aria-label="Close" (click)="cancelAction()"></i>
            <p *ngIf="subTitle">{{subTitle}}</p>
          </div>
        <ng-content></ng-content>
      </div>
  </div>
</div>

Next, create a corresponding TypeScript file named myModal.component.ts:

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

const template: string = require('./myModal.html');

@Component({
   selector: 'modal',
   template
})

export class Modal implements OnInit {
  // Include necessary Input and Output properties here
  
  constructor() {}

  // Implement necessary methods for showing, hiding, and handling actions
  
}

// Define ModalAction and ModalResult interfaces
export enum ModalAction { POSITIVE, CANCEL }

export interface ModalResult {
  action: ModalAction;
}

Lastly, create a reusable module for the modal component so you can easily use it anywhere in your application. Here's an example of how you can utilize the modal:

<modal #deleteUserModal id="deleteUser"
   [show-modal]="isModalOpen"
   [title]="'Delete'"
   >
  <div class="popup-content">
    <p>Are you sure you want to delete the user permanently?</p>
  </div>
  <div class="popup-footer">
    <button class="btn cancel"  aria-label="Close" (click)="deleteUserModal.hide()">
        Cancel
    </button>
    <button type="button" class="btn btn-primary" (click)="deleteSelectedUser(deleteUserModal)" aria-label="Close">
        Delete
    </button>
  </div>
</modal>

Feel free to enhance this modal component further based on your specific requirements!

Answer 3

Answer №2

If your modal includes a cancel button (if not, create a hidden close button), you have the option to simulate a click event on this button to close your form. Within your component, make sure to incorporate a ViewChild.

export class HelloComponent implements OnInit {

@ViewChild('fileInput') fileInput:ElementRef;

In your close button, remember to add #fileInput.

<button class="btn btn-danger" #fileInput id="delete-node" name="button" data-dismiss="modal" type="submit">Cancelar</button>

When you need to close the modal programmatically, simply trigger a click event on the close button.

this.fileInput.nativeElement.click();

The same concept can be applied for opening the modal as well.

Answer 4

If your modal includes a cancel button (if not, create a hidden close button), you have the option to simulate a click event on this button to close your form. Within your component, make sure to incorporate a ViewChild.

export class HelloComponent implements OnInit {

@ViewChild('fileInput') fileInput:ElementRef;

In your close button, remember to add #fileInput.

<button class="btn btn-danger" #fileInput id="delete-node" name="button" data-dismiss="modal" type="submit">Cancelar</button>

When you need to close the modal programmatically, simply trigger a click event on the close button.

this.fileInput.nativeElement.click();

The same concept can be applied for opening the modal as well.

Answer 5

Answer №3

Well, it seems that there's no necessity to explicitly bind to aria-hidden, even though it might be feasible.

The information presented in this response was sourced from a discussion about Angular 2.0 and Modal Dialog (albeit with only 9 upvotes).

By incorporating

<div id="createAccountModal" class="modal fade customForm" role="dialog" [ngClass]="{'in': visibleAnimate}"
       [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">

into my codebase, and attaching a (click) event handler to a button to control the toggling of the visible and visibleAnimate variables met my requirements perfectly.

Answer 6

Well, it seems that there's no necessity to explicitly bind to aria-hidden, even though it might be feasible.

The information presented in this response was sourced from a discussion about Angular 2.0 and Modal Dialog (albeit with only 9 upvotes).

By incorporating

<div id="createAccountModal" class="modal fade customForm" role="dialog" [ngClass]="{'in': visibleAnimate}"
       [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">

into my codebase, and attaching a (click) event handler to a button to control the toggling of the visible and visibleAnimate variables met my requirements perfectly.

Answer 7

Answer №4

Why not try utilizing ng-window? It provides developers with the ability to easily open and manage multiple windows within single-page applications without the need for jQuery or Bootstrap.

https://i.sstatic.net/f2ehJ.gif

Available Configuration Options:

Maximize window
Minimize window
Custom size
Custom position
Ability to drag the window
Option to block the parent window
Option to center the window
Pass values to child windows
Pass values from child windows to parent window
Listen for closing child windows in the parent window
Custom listener for resize events
Open with maximum size
Enable or disable window resizing
Enable or disable maximization
Enable or disable minimization

Answer 8

Why not try utilizing ng-window? It provides developers with the ability to easily open and manage multiple windows within single-page applications without the need for jQuery or Bootstrap.

https://i.sstatic.net/f2ehJ.gif

Available Configuration Options:

Maximize window
Minimize window
Custom size
Custom position
Ability to drag the window
Option to block the parent window
Option to center the window
Pass values to child windows
Pass values from child windows to parent window
Listen for closing child windows in the parent window
Custom listener for resize events
Open with maximum size
Enable or disable window resizing
Enable or disable maximization
Enable or disable minimization

Opening and closing a default Bootstrap modal in Angular 2

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Encountering issues with `Partial<this['someProperty']>` usage in TypeScript

Unable to integrate BokehJS with Angular8

Extracting a value from a datetimepicker in Angular 6

Empty array being returned by Mongoose after calling the populate() function

Tips for customizing the appearance of a label when a MUI Radio Button is selected

Add an asterisk before each line of comment when working in a TypeScript file using the VS Code IDE

The variable "theme" is referenced prior to being initialized

What is the best way to create a routerlink that is both single-clickable and double-clickable within an

I'm having trouble configuring the header in my Node/Express route

Having trouble utilizing a JavaScript file within TypeScript

Implement Bootstrap into Asp.Net Core 6 for the scaffolded Identity _Layout.cshtml

Can we determine the type signature of useCallback for an event handler by inference?

A blank canvas emerges upon utilizing the Angular-Bootstrap Carousel feature

Conceal API request details on the network tab

Issue: Module '@angular/compiler' not found

Ionic is encountering a problem with module build, specifically an error related to the absence of a file or directory

Tips for deactivating the matMenuTrigger when the mat menu does not display any menu items

Ways to verify the functionality of a function utilizing a Subscription that yields no return value

The best practices for utilizing ES6 Modules syntax in TypeScript files within a NextJS environment

How to use Angular template syntax to assign an async array to multiple variables