How to use code to open a modal in Angular 2

Question

Usually we use data-target   myModal  in the  lt button gt  to open a modal  Right now I need use codes to control when to open the modal   If I use  hidden  or  ngIf to show it  I need remove class  modal fade   otherwise  the modal will never show  Like this    lt div  hidden   hideModal  id  myModal  gt    However  in this case  after removing class  modal fade   the modal won t fade in and has no shade in the background  And what s worse  it will show at the screen bottom instead of screen center   Is there a way to keep class  modal fade  and use code to open it     lt button type  button  data-toggle  modal  data-target   myModal  gt Open Modal lt  button gt    lt div id  myModal  class  modal fade  gt     lt div class  modal-dialog  gt       lt div class  modal-content  gt         lt div class  modal-body  gt           lt p gt Some text in the modal  lt  p gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

Think I found the correct way to do it using ngx-bootstrap. First import following classes:

import { ViewChild } from '@angular/core';
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

Inside the class implementation of your component add a @ViewCild property, a function to open the modal and do not forget to setup modalService as a private property inside the components class constructor:

@ViewChild('editSomething') editSomethingModal : TemplateRef<any>;
...

modalRef: BsModalRef;
openModal(template: TemplateRef<any>) {
  this.modalRef = this.modalService.show(template);
}
...
constructor(
private modalService: BsModalService) { }

The 'editSomething' part of the @ViewChild declaration refers to the component template file and its modal template implementation (#editSomething):

...
<ng-template #editSomething>
  <div class="modal-header">
  <h4 class="modal-title pull-left">Edit ...</h4>
  <button type="button" class="close pull-right" aria-label="Close" 
   (click)="modalRef.hide()">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>

  <div class="modal-body">
    ...
  </div>


  <div class="modal-footer">
    <button type="button" class="btn btn-default"
        (click)="modalRef.hide()"
        >Close</button>
  </div>
</ng-template>

And finaly call the method to open the modal wherever you want like so:

console.log(this.editSomethingModal);
this.openModal( this.editSomethingModal );

this.editSomethingModal is a TemplateRef that could be shown by the ModalService.

Et voila! The modal defined in your component template file is shown by a call from inside your component class implementation. In my case I used this to show a modal from inside an event handler.

User · Answer

For me I had to settimeout in addition to  arjun-sk solution s  link   as I was getting the error  setTimeout      gt          this modalService open this loginModal    centered  true           100

User · Answer

Best way I have found  Put  lgModal or some other variable name in your modal   In your view    lt div bsModal  lgModal  bs-modal  class  modal fade  tabindex  -1  role  dialog  aria-labelledby  myLargeModalLabel  aria-hidden  true  gt     lt div class  modal-dialog modal-lg  gt       lt div class  modal-content  gt         lt div class  modal-header  gt           lt button type  button  class  close   click   lgModal hide    aria-label  Close  gt             lt span aria-hidden  true  gt  amp times  lt  span gt           lt  button gt           lt h4 class  modal-title  gt Large modal lt  h4 gt         lt  div gt         lt div class  modal-body  gt                     lt  div gt       lt  div gt     lt  div gt   lt  div gt    In your component  import  Component  ViewChild  AfterViewInit  from   angular core   import  CORE DIRECTIVES  from   angular common      todo  change to ng2-bootstrap import  MODAL DIRECTIVES  BS VIEW PROVIDERS  from  ng2-bootstrap ng2-bootstrap   import  ModalDirective  from  ng2-bootstrap ng2-bootstrap      Component     selector   modal-demo     directives   MODAL DIRECTIVES  CORE DIRECTIVES     viewProviders  BS VIEW PROVIDERS     templateUrl    app components modals modalDemo component html     export class ModalDemoComponent implements AfterViewInit      ViewChild  childModal   public childModal  ModalDirective     ViewChild  lgModal   public lgModal  ModalDirective     public showChildModal   void       this childModal show           public hideChildModal   void       this childModal hide           ngAfterViewInit           this lgModal show

User · Answer

I do not feel there is anything wrong with using JQuery with angular and bootstrap  since it is included when adding bootstrap    Add the   right after the imports like this     import           declare var    any    component         modal should have an id like this     lt div id  errorModal  class  modal fade bd-example-modal-lg  tabindex  -1  role  dialog  aria-labelledby  myLargeModalLabel                   then have a method like this    showErrorModal          errorModal   modal  show         call the method on a button click or anywhere you wish

User · Answer

We can use jquery to open bootstrap modal   ngAfterViewInit                scanModal   modal  show

User · Answer

The Way i used to do it without lots of coding is   I have the hidden button with the id  employeeRegistered   On my  ts file I import ElementRef from   angular core   Then after I process everything on my  click  method do as follow   this el nativeElement querySelector   employeeRegistered   click     then the modal displays as expected

User · Answer

ng-bootstrap ng-bootstrap npm I m using for this as in the project bootstrap is used  for material  we used dialog  HTML Code     lt span  click   openModal modalRef   class  form-control input-underline pl-3   gt Open Abc Modal   lt  span gt    Modal template   lt ng-template class  custom-modal    modalRef let-c  close  let-d  dismiss  gt      lt div class  modal-header custom-modal-head  gt  lt h4 class  modal-title  gt List of Countries lt  h4 gt        lt button type  button  class  close  aria-label  Close   click   d  Cross click    gt            lt img src  assets actor images close png  alt    gt         lt  button gt     lt  div gt     lt div class  modal-body country-select  gt          lt div class  serch-field  gt              lt div class  row  gt                  lt div class  col-md-12  gt                    lt input type  text   class  form-control input-underline pl-3  placeholder  Search Country                        ngModel    countryWorkQuery   ngModelOptions    standalone  true   gt                    lt ul  ngIf  countries  class  ng-star-inserted  gt                      lt li  click   setSelectedCountry cntry   work   d  Cross click     class  cursor-pointer                      ngFor  let cntry of countries   filterNames countryWorkQuery   gt   cntry name   lt  li gt                    lt  ul gt                    lt span  ngIf   modalSpinner  amp  amp    countries    countries length lt  0   gt No country found lt  span gt                    lt span  ngIf  modalSpinner  class  loader  gt                        lt img src  assets images loader gif  alt  loader  gt                    lt  span gt                  lt  div gt                lt  div gt          lt  div gt    lt  div gt   lt  ng-template gt    Ts File  import  NgbModal  ModalDismissReasons  from   ng-bootstrap ng-bootstrap    constructor      private modalService  NgbModal            openModal modalContent        this modalService open modalContent    centered  true

User · Answer

I m currently using Bootstrap 4 3 in Angular 8 and want to open modal window programmatically  without actually clicking on some button as the official demo shows    Following method works for me  The general idea is to create a button associated to a modal window   First make sure after you click this button  it can open the modal  Then give this button tag an id using hashtag  for example  hiddenBtn  In component ts file  import ViewChild from  angular core and write below code    ViewChild  hiddenBtn    static  false   myHiddenBtn    After that  whenever you want to open this modal window in your component ts code  write following code to simulate click operation  this myHiddenBtn nativeElement click

User · Answer

This is one way I found  You can add a hidden button    lt button id  openModalButton   hidden   true  data-toggle  modal  data-target   myModal  gt Open Modal lt  button gt    Then use the code to  click  the button to open the modal   document getElementById  openModalButton   click      This way can keep the bootstrap style of the modal and the fade in animation

User · Answer

The below answer is in reference to the latest ng-bootstrap Install npm install --save  ng-bootstrap ng-bootstrap  app module ts import  NgbModule  from   ng-bootstrap ng-bootstrap     NgModule     declarations                   imports                 NgbModule         providers        bootstrap   AppComponent     export class AppModule      Component Controller import   TemplateRef  ViewChild   from   angular core   import   NgbModal   from   ng-bootstrap ng-bootstrap     Component     selector   app-app-registration     templateUrl     app-registration component html     styleUrls      app-registration component css       export class AppRegistrationComponent implements OnInit       ViewChild  editModal   editModal   TemplateRef lt any gt      Note  TemplateRef    constructor private modalService  NgbModal         openModal        this modalService open this editModal           Component HTML  lt ng-template  editModal let-modal gt    lt div class  quot modal-header quot  gt     lt h4 class  quot modal-title quot  id  quot modal-basic-title quot  gt Edit Form lt  h4 gt     lt button type  quot button quot  class  quot close quot  aria-label  quot Close quot   click   quot modal dismiss   quot  gt       lt span aria-hidden  quot true quot  gt  amp times  lt  span gt     lt  button gt   lt  div gt    lt div class  quot modal-body quot  gt        lt form gt       lt div class  quot form-group quot  gt         lt label for  quot dateOfBirth quot  gt Date of birth lt  label gt         lt div class  quot input-group quot  gt           lt input id  quot dateOfBirth quot  class  quot form-control quot  placeholder  quot yyyy-mm-dd quot  name  quot dp quot  ngbDatepicker  dp  quot ngbDatepicker quot  gt           lt div class  quot input-group-append quot  gt             lt button class  quot btn btn-outline-secondary calendar quot   click   quot dp toggle   quot  type  quot button quot  gt  lt  button gt           lt  div gt         lt  div gt       lt  div gt     lt  form gt    lt  div gt    lt div class  quot modal-footer quot  gt     lt button type  quot button quot  class  quot btn btn-outline-dark quot   click   quot modal close   quot  gt Save lt  button gt   lt  div gt    lt  ng-template gt

User · Answer

Include jQuery as usual inside script tags in index html   After all the imports but before declaring  Component  add   declare var    any    Now you are free to use jQuery anywhere in your Angular 2 TypeScript code       myModal   modal  show      Reference  https   stackoverflow com a 38246116 2473022

User · Answer

I am using a variable to control show and hide and rely on the button the open the modal  ts code   showModel      this showModal   true      html    lt button type  button  data-toggle  modal  data-target   myModal   click   showModel   gt Open Modal lt  button gt    lt div  ngIf  showModal   gt     lt div id  myModal  class  modal fade  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-body  gt                   lt p gt Some text in the modal  lt  p gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

Easy way to achieve this in angular 2 or 4   Assuming that you are using bootstrap 4      Component html    x000D   x000D   lt button type  button   click   openModel    gt Open Modal lt  button gt  x000D   x000D   lt div  myModel class  modal fade  gt  x000D     lt div class  modal-dialog  gt  x000D       lt div class  modal-content  gt  x000D        lt div class  modal-header  gt  x000D           lt h5 class  modal-title   gt Title lt  h5 gt  x000D           lt button type  button  class  close   click   closeModel    gt  x000D               lt span aria-hidden  true  gt  amp times  lt  span gt  x000D           lt  button gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D           lt p gt Some text in the modal  lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D       Component ts   import  Component  OnInit  ViewChild  from   angular core     ViewChild  myModal   myModal   openModel       this myModal nativeElement className    modal fade show     closeModel        this myModal nativeElement className    modal hide

User · Answer

Simply  npm install --save  types bootstrap try to match typing version with your bootstrap version  E g  you have Bootstrap 4 3 1 then npm install --save  types bootstrap 4 3 1

User · Answer

Here is my full implementation of modal bootstrap angular2 component   I assume that in your main index html file  with  lt html gt  and  lt body gt  tags  at the bottom of  lt body gt  tag you have      lt script src  assets js jquery-2 1 1 js  gt  lt  script gt     lt script src  assets js bootstrap min js  gt  lt  script gt    modal component ts   import   Component  Input  Output  ElementRef  EventEmitter  AfterViewInit   from   angular core    declare var    any    this is very importnant  to work this line  this modalEl modal  show    - don t do this  becouse this owerride jQuery which was changed by bootstrap  included in main html-body template   let     require                 node modules jquery dist jquery min js      Component     selector   modal     templateUrl     modal html      export class Modal implements AfterViewInit         Input   title string       Input   showClose boolean   true       Output   onClose  EventEmitter lt any gt    new EventEmitter         modalEl   null      id  string   uniqueId  modal          constructor private  rootNode  ElementRef          open             this modalEl modal  show               close             this modalEl modal  hide               closeInternal        close modal when click on times button in up-right corner         this onClose next null      emit event         this close               ngAfterViewInit             this modalEl     this  rootNode nativeElement  find  div modal               has selector            return   this  rootNode nativeElement  find selector  length           let modal id  number   0  export function uniqueId prefix  string   string       return prefix     modal id      modal html    lt div class  modal inmodal fade  id    modal id    tabindex  -1  role  dialog   aria-hidden  true   thisModal gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-header   ngClass     hide     has  mhead      title     gt                   lt button  ngIf  showClose  type  button  class  close   click   closeInternal    gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt span class  sr-only  gt Close lt  span gt  lt  button gt                   lt ng-content select  mhead  gt  lt  ng-content gt                   lt h4  ngIf  title  class  modal-title  gt    title    lt  h4 gt               lt  div gt               lt div class  modal-body  gt                   lt ng-content gt  lt  ng-content gt               lt  div gt                lt div class  modal-footer   ngClass     hide    has  mfoot       gt                   lt ng-content select  mfoot  gt  lt  ng-content gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    And example of usage in client Editor component  client-edit-component ts   import   Component   from   angular core   import   ClientService   from    client service   import   Modal   from     common     Component     selector   client-edit     directives    Modal      templateUrl     client-edit html     providers    ClientService      export class ClientEdit         modal   null       constructor private  ClientService  ClientService          bindModal modal   this  modal modal        open client            this  modal open            console log  client               close             this  modal close               client-edit html    lt modal  title    Some standard title    showClose   true   onClose   close     editModal gt    bindModal editModal          lt mhead gt Som non-standart title lt  mhead gt      Some contents      lt mfoot gt  lt button calss  btn   click   close    gt Close lt  button gt  lt  mfoot gt   lt  modal gt    Ofcourse title  showClose  mhead and mfoot ar optional parameters

[angular] How to use code to open a modal in Angular 2?

Examples related to angular

[angular] How to use code to open a modal in Angular 2?

Examples related to angular

Examples related to bootstrap-modal