Angular 2: How to open Semantic-UI modal

By Char

The error I got in the console says

Cannot read property ‘onShowConfirmation’

Below is my employee-page.component.html code with the showConfirmation() function call:

 <button class="ui button basic medium" (click)="showConfirmation()">Delete</button>

In my employee.component.ts, here is my showConfirmation() which calls another component since the jQuery for opening of the modal is there

@ViewChild(DialogBoxComponent)
private localDialog: DialogBoxComponent;
showConfirmation() {
  this.localDialog.onShowConfirmation();
}

In my dialog-box-component.ts, the onShowConfirmation() code is this

onShowConfirmation() {
    $('.ui.small.modal').modal('show');
}

And lastly, the dialog-box.component.html is this..where the div for the modal is located

<div class="ui small modal">
    <div class="header">Are you sure you want to delete employee?<br/><br/></div>
    <div class="actions">
        <div class="ui button dialog-button" (click)="closeModal()">CANCEL</div>
        <div class="ui button dialog-button" (click)="del()">DELETE</div>
    </div>
</div>

So as a summary, I separated the div of the modal from the button to another component and I want to access the method of dialog-box from employee-page

Source: Stack Overflow

    

Share it with your friends!

    Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/19/9652219/html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273