What is the best method to trigger a bootstrap modal window from a separate component in Angular 8?

Question

What is the best method to trigger a bootstrap modal window from a separate component in Angular 8?

I have successfully implemented a bootstrap modal window that opens on a button click. However, I am now facing difficulty in opening the same modal window from a different component. Below is the code I have tried:

<section>
    <button type="button" class="btn btn-primary" (click)="openModal()">Sign In</button>
    
    <div id="signInModal" class="modal fade m-5" role="dialog"
        aria-labelledby="dialog-sizes-name2" data-backdrop="static">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="circularBold signUpHeading">Sign In</h6>
                    <button type="button" class="close" aria-label="Close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form [formGroup]="signInForm">    
                            <div class="mt-4">
                                <button type="button" class="btn buttons nextBtn circularBold w-100" (click)="login()">Log in</button>
                                <p class="black2E circularBook mt-4 font-size12">Don't have an account?
                                    <a href="" class="circularMedium">Sign up</a>
                                </p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

TS

  openModal() {
    $('#signInModal').modal('show');
  }

Code from another component

modalRef: BsModalRef;
 constructor(
    private modalService: BsModalService
  ) { }

   join(){
        this.modalRef = this.modalService.show(SigninComponent);
   }

Any assistance on this issue would be highly appreciated.

Thank you in advance!

javascript angular typescript bootstrap-4 modal-dialog

Answer 1

Answer №1

Upon further examination of your attempt to display the dialog, it is clear that you are utilizing ngx-bootstrap

In line with @MikeOne's advice, Avoid using JQuery in an angular application. Angular is sufficient for binding your view to the model.

The Issue

After attempting to replicate your code, I have found that enclosing your content within the following code snippet appears to be causing the dialog not to appear:

<section>
    <button type="button" class="btn btn-primary" (click)="openModal()">Sign In</button>
    
    <div id="signInModal" class="modal fade m-5" role="dialog"
        aria-labelledby="dialog-sizes-name2" data-backdrop="static">
        <div class="modal-dialog modal-md">

          <!-- Other Stuff here -->
        </div>
    </div>
</section>

Resolution

Within your LoginComponent, simply include the following:

<div class="modal-content">
    <div class="modal-header">
        <h6 class="circularBold signUpHeading">Sign In</h6>
        <button
            type="button"
            class="close"
            aria-label="Close"
            data-dismiss="modal"
          >
            <span aria-hidden="true"gt;&times;</span>
          </button>
    </div>
    <div class="modal-body">
        <form [formGroup]="signInForm">
            <div class="mt-4">
                <button
                type="button"
                class="btn buttons nextBtn circularBold w-100"
                (click)="login()"
              >
                Log in
              </button>
                <p class="black2E circularBook mt-4 font-size12">
                    Don't have an account?
                    <a href="" class="circularMedium">Sign up</a>
                </p>
            </div>
        </form>
    </div>
</div>

View this solution on stackblitz

Answer 2

Upon further examination of your attempt to display the dialog, it is clear that you are utilizing ngx-bootstrap

In line with @MikeOne's advice, Avoid using JQuery in an angular application. Angular is sufficient for binding your view to the model.

The Issue

After attempting to replicate your code, I have found that enclosing your content within the following code snippet appears to be causing the dialog not to appear:

<section>
    <button type="button" class="btn btn-primary" (click)="openModal()">Sign In</button>
    
    <div id="signInModal" class="modal fade m-5" role="dialog"
        aria-labelledby="dialog-sizes-name2" data-backdrop="static">
        <div class="modal-dialog modal-md">

          <!-- Other Stuff here -->
        </div>
    </div>
</section>

Resolution

Within your LoginComponent, simply include the following:

<div class="modal-content">
    <div class="modal-header">
        <h6 class="circularBold signUpHeading">Sign In</h6>
        <button
            type="button"
            class="close"
            aria-label="Close"
            data-dismiss="modal"
          >
            <span aria-hidden="true"gt;&times;</span>
          </button>
    </div>
    <div class="modal-body">
        <form [formGroup]="signInForm">
            <div class="mt-4">
                <button
                type="button"
                class="btn buttons nextBtn circularBold w-100"
                (click)="login()"
              >
                Log in
              </button>
                <p class="black2E circularBook mt-4 font-size12">
                    Don't have an account?
                    <a href="" class="circularMedium">Sign up</a>
                </p>
            </div>
        </form>
    </div>
</div>

View this solution on stackblitz

Answer 3

Answer №2

It is recommended to utilize ngx-bootstrap

To add ngx-bootstrap, use the following command:

ng add ngx-bootstrap  --component modals

Ensure you import ModalModule in your app.module.ts like this:

import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}

To create a basic template, your parent.component.ts file should have the following setup

import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { TemplateComponent } from './template/template.component';
 
@Component({
  selector: 'app-parent',
  templateUrl: './app.component.html'
})
export class ParentComponent {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

 // The TemplateComponent contains the modal content. Another component named "TemplateComponent" has been created for this purpose.

  openModal() {
    this.modalRef = this.modalService.show(TemplateComponent);
  }
}

In the Template component, the template.component.ts file should be set up as follows

    import { Component } from '@angular/core';
    import { BsModalRef } from 'ngx-bootstrap/modal';
@Component({
    selector: 'app-template',
    templateUrl: './template.component.html'
})
export class TemplateComponent implements OnInit {
    constructor(public modalRef: BsModalRef) { }
ngOnInit(){}
}

Answer 4

It is recommended to utilize ngx-bootstrap

To add ngx-bootstrap, use the following command:

ng add ngx-bootstrap  --component modals

Ensure you import ModalModule in your app.module.ts like this:

import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}

To create a basic template, your parent.component.ts file should have the following setup

import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { TemplateComponent } from './template/template.component';
 
@Component({
  selector: 'app-parent',
  templateUrl: './app.component.html'
})
export class ParentComponent {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

 // The TemplateComponent contains the modal content. Another component named "TemplateComponent" has been created for this purpose.

  openModal() {
    this.modalRef = this.modalService.show(TemplateComponent);
  }
}

In the Template component, the template.component.ts file should be set up as follows

    import { Component } from '@angular/core';
    import { BsModalRef } from 'ngx-bootstrap/modal';
@Component({
    selector: 'app-template',
    templateUrl: './template.component.html'
})
export class TemplateComponent implements OnInit {
    constructor(public modalRef: BsModalRef) { }
ngOnInit(){}
}

What is the best method to trigger a bootstrap modal window from a separate component in Angular 8?

Answer №1

The Issue

Resolution

Answer №2

Similar questions

The functionality of Directive hinges on the use of a template

The Express.js main router is functioning properly, however, the other routers connected to it are experiencing

Flow the child process output as it streams

Problem with onblur and onchange events not being triggered in input tag

Trouble with importing React JSX from a separate file when working with Typescript

What is the proper way to invoke a child method after converting an object from a parent class to a child class?

"Experiencing sluggish performance with VSCode while using TypeScript and Styled Components

Developing a versatile table component for integration

Encountering an unexpected token in Javascript when using conditionals

Display a comprehensive inventory of all bot commands within a designated category

The jQuery keyup event initiates multiple times, increasing exponentially with each trigger

AngularJS not compatible with Splice functionality

What is the advantage of not importing related modules?

Aligning Content in the Middle of a Bootstrap Row

Tips for adjusting the language settings on a date picker

What is the best way to programmatically disable a button in JavaScript or jQuery when all the checkboxes in a grid are either disabled or unchecked?

To enhance VS IntelliSense and type checking in react-intl's FormattedMessage component, assign an id that aligns with a custom TypeScript interface

Synchronizing two navigation menus on a single-page application website

Troubleshooting Issues with Form Inputs in JS/Angular Using Places API and document.getElementById Method

How can I utilize React to pull information from the Google Taxonomy API?