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

Delete the browsing cache in Internet Explorer from an external source

$set { "array.variable.value" :"newvalue"} utilize a different term besides "variable" or implement a new variable

I am interested in developing a JavaScript program that can calculate multiples of 0.10

Encountering a problem with AngularJS - receiving the [ng:areq] error, for more information visit http://errors.angularjs.org/1.3.2/ng/areq

Tips on utilizing browser.getCurrentUrl() within a Protractor examination

What is the best way to convert a `readonly string[]` to a regular `string[]`?

The base URL specified in the tsconfig file is causing the absolute path to malfunction

Is it possible to merge these two scripts into a single one within Vue?

What is the method for defining distinct parameters for nested functions in AngularJS?

Phonegap application functioning smoothly on computer, encountering issues on mobile device

Is there a way to modify the window's location without having to reload it and without resorting to any sne

Angular 2: A ready-made solution for developing interactive discussion features

Error message indicates failure of switch case, resulting in invalid output of

What might be causing my Vue unit test to overlook a function?

Obtaining the ID from a URL in node.js

Prevent entry into property in Ionic 2 course

What could be causing the lack of updates for a watched object in vue?

Remove an array object in React Redux

Lists are not limited to only <li> elements and elements that support scripts (<script> and <template>)

Autocomplete search from a distance