jquery - How to hide and show modal boxes in angular2 -

i used ng2 modal not getting opened or hide through ts, template,

    <modal  id='saveeditsmodal'>   <modal-header>         <h4 class="modal-title">editing item(s) in viewed</h4>        </modal-header>       <!-- modal content-->       <modal-content>         <div class="modal-body">           <p>you have unsaved changes.</p>         </div>          <div class="modal-body">           <p>are sure want discard these changes?</p>         </div>                </modal-content>      <modal-footer>           <button type="button" class="btn btn-primary" data-dismiss="modal">stay on list</button>           <button type="button" class="btn btn-default" data-dismiss="modal" (click)='closebox()'>discard</button>   </modal-footer>   </modal> 

my ts,

$('#saveeditsmodal').show(); 

actually ng2 model ,i not sure process hide or show,can suggest help.thanks.

if you're using angular2, should try avoid using jquery can.

if using ng2-bootstrap modules, offers decent modal component, should consider doing following.

create own implementation of modal, extending existing modalmodule ng2-bootstrap.

only have visible using *ngif="variablename", instance do:

function show() {   this.variablename = true } 

as part of component.

then in component want use modal, add viewchild so:

@viewchild('componentid') modalcmp: modalcomponent

your html this:

<modal #componentid></modal>

you extend , upgrade component adding @input() , @output() variables it, manipulate it's behavior.

in code/component, can refer modalcmp. instance:

function showmymodal() {   this.modalcmp.show() } 

if have additional questions, feel free ask. don't forget declare , import modal components using module loaders in angular2.