How to open a bootstrap modal window from other component in Angular 8?

Question

I have a bootstrap modal window that needs to open up on a button click, which is working fine. Now, I want to open that same modal window from a different component, I tried something but it isn't working, following is my code,

<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 other component

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

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

Any help is much appreciated.

Thanks in advance!!

Answer 1

From your second attempt to show the dialog, it is evident that you are using ngx-bootstrap

As stated by @MikeOne Do not use JQuery in an angular app Angular is enough to bind your view to the model

The Problem

I have tried to reproduce your code and discovered that for some reason, wrapping your content inside the below code is what seems to be making your code not to show the dialogue

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

Solution

In your LoginComponent Simply have below

<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>
        </form>
    </div>
</div>

See this solution on stackblitz

Answer 2

It's better to use ngx-boostrap

Add ngx-bootstrap as follows:

ng add ngx-bootstrap  --component modals

It's mandatory to import ModalModule in app.module.ts as follows

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

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

for creating a simple template parent.component.ts file should be as follows

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

 // Here the TemplateComponent includes the modal content. For that I  have created another component name "TemplateComponent" 

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

In Template component template.component.ts file looks as follow

    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(){}
}