How to use modal dialog with Angular and VMware Clarity?

Question

I need to display a modal dialog control with a question and yes/no buttons, wait for the user's choice, then run some code to perform the selected action.

The VMWare Clarity documentation is very clear about the markup inside the dialog, but it does not talk about how to show or hide it.

I'd love a complete example, thank you.

Answer 1

I'm assuming you are describing a situation where you want to confirm an action (like confirm you wish to delete an item), and if so you should review the code found here. You can follow the methods it calls to see the logic.

https://github.com/gnomeontherun/clarity-workshop/blob/master/src/app/budget/budget/budget.component.html#L56

This is a delete button that calls a method, which then opens a modal dialog. The user then confirms or cancels, and then if they confirm it calls the API to actually delete.

If you'd like to make your own service to control the modal, you can follow the example I have for an alert service and alert component (but change it to a modal). https://github.com/angular-in-action/portfolio/tree/master/src/app/alert

Answer 2

Let's assume the user clicks on a "Delete order" button, and you want to display a modal dialog with "Are you sure?" and "Cancel" and "Delete" buttons.

Jeremy's example above is great. Here is a minimal implementation:

In order.component.ts :

isModalVisible = false;

deleteOrder() {
  ...
}

In order.component.html :

<div>
  ...
  <button (click)="isModalVisible = true">Delete Order</button>
  ...
</div>

<clr-modal [(clrModalOpen)]="isModalVisible">
  <h3 class="modal-title">Delete order?</h3>
  <div class="modal-body">This cannot be undone.</div>
  <div class="modal-footer">
    <button type="button" class="btn (click)="isModalVisible = false">Cancel</button>
    <button type="button" class="btn (click)="deleteOrder()">Delete</button>
  </div>
</clr-modal>

Angular 6.1.9, Clarity 0.13.4