How to trigger modals using show

Question

I'm using this.myModal1.show() & this.myModal2.show() to open the modals. But It is always triggering myModal1

My component.ts

@ViewChild(ModalDirective) myModal1: ModalDirective;
@ViewChild(ModalDirective) myModal2: ModalDirective;

My component.html

<div class="modal fade" bsModal #myModal1="bs-modal"
     tabindex="-1" role="dialog" aria-labelledby="dialog-events-name">
  <div class="modal-dialog otp-modal">
    <div class="modal-content">
        ...
    </div>
  </div>
</div>

<div class="modal fade" bsModal #myModal2="bs-modal"
     tabindex="-1" role="dialog" aria-labelledby="dialog-events-name">
  <div class="modal-dialog otp-modal">
    <div class="modal-content">
        ...
    </div>
  </div>
</div>

Is it working for you? The answer? – BeeBee8 May 17 '18 at 15:30 — BeeBee8, May 17 '18 at 15:30

score 1 · Answer 1 · answered May 17 '18 at 14:15

This is because @ViewChild(ModalDirective) will target the first element using ModalDirective.

https://angular.io/api/core/ViewChild

You can use ViewChild to get the first element or the directive matching the selector from the view DOM.

I think you should use template reference variable like this :

@ViewChild('myModal1') myModal1: ModalDirective;
@ViewChild('myModal2') myModal2: ModalDirective;

score 1 · Answer 2 · answered May 17 '18 at 14:15

1

Try change:

@ViewChild(ModalDirective) myModal1: ModalDirective;
@ViewChild(ModalDirective) myModal2: ModalDirective;

To:

@ViewChild('myModal1') myModal1: ModalDirective;
@ViewChild('myModal2') myModal2: ModalDirective;

answered May 17 '18 at 14:15

Ryan Huang

728
6
7

BeeBee8 · Accepted Answer · 2018-05-17T15:15:19.483

1

You should pass reference id to Viewchild instead of ModalDirective

Because with ModalDirective it always targets first element with that directive.

@ViewChild('myModal1') myModal1: ModalDirective;
@ViewChild('myModal2') myModal2: ModalDirective;

Here is Stackblitz link with this implemented.

https://stackblitz.com/edit/angular-ngx-bootstrap-p6ohpe

Also see Docs here https://angular.io/api/core/ViewChild

You can use ViewChild to get the first element or the directive matching the selector from the view DOM.

edited May 17 '18 at 15:15

answered May 17 '18 at 14:24

BeeBee8

2,944
1
27
39

@BhavaniPrasad on stackblitz? or at your end? because it looks fine on stackblitz – BeeBee8 May 18 '18 at 06:55
problem with some z-index. working fine (y). Can I access the modal if it is in another component.html? – Bhavani Prasad May 18 '18 at 09:21
@BhavaniPrasad If you are looking for a common model, then you can make separate component which can be opened with service with dynamic data. for e.g you can look at this : https://stackblitz.com/edit/ngx-bootstrap-fh92s3 – BeeBee8 May 18 '18 at 09:31
Can we use angular way like this.mymodal1.show() instead of query $('#myModal').modal('show'); I don't want to use jquery – Bhavani Prasad May 18 '18 at 10:53
@BhavaniPrasad Yes you can. Use that example just for reference, and replace jquery with ngx-bootstrap methods. – BeeBee8 May 18 '18 at 11:24
I have tried. But I'm unable. https://stackblitz.com/edit/angular-ecl7se Can u pls check – Bhavani Prasad May 18 '18 at 11:54
1

@BhavaniPrasad Kindly check 'EDIT' at the end of this answer I have updated it with what you want & Upvote it if it helps you. https://stackoverflow.com/questions/50296973/to-reuse-html-content-in-angular-5/50298872#50298872 – BeeBee8 May 18 '18 at 13:40
Thank u so much. I'm really trying this hard from one week. I have some more issues with angular. Can you please help me resolve them https://stackoverflow.com/questions/50239986/changes-made-in-files-under-node-modules https://stackoverflow.com/questions/50393854/unable-to-change-or-give-custom-css-for-ng-datepicker https://stackoverflow.com/questions/50409800/how-to-add-custom-style-to-ngx-bootstrap-tooltip – Bhavani Prasad May 18 '18 at 14:02
1

@BhavaniPrasad I have added answer to date picker question , see if that works for you. – BeeBee8 May 19 '18 at 16:46

How to trigger modals using show

3 Answers3