Is it possible to programmatically control the show/hide of clarity drop downs?

Question

Is it possible to programmatically control the show/hide of drop downs from the ts code of the component (in clarity using Angular2)- https://vmware.github.io/clarity/documentation/dropdowns

Basically I am trying to use the drop down as a toast notification i.e. 2 triggers to show the drop down content 1. On click 2. On an event that happened in code (errors in ajax calls etc)

Answer 1

As Jeremy said above, using a dropdown for a toast or notification is not a recommended Clarity design pattern. However, it is possible to hide/show the dropdown menu with code. See the plunker below for an example that uses the *clrIfOpen directive.

The *clrIfOpen directive isn't documented on the site yet but we are working on updating it to reflect usage in these cases.

If you set the open property in your code you can hide/show the clr-dropdown-menu

<clr-dropdown>
    <button clrDropdownTrigger class="btn">
      Dropdown Toggle
      <clr-icon shape="caret down"></clr-icon>
    </button>
    <clr-dropdown-menu *clrIfOpen="open" clrPosition="bottom-left">
      <label class="dropdown-header">Dropdown header</label>
      <a href="javascript://" clrDropdownItem>Action 1</a>
      <a href="javascript://" clrDropdownItem>Action 2</a>
      <div class="dropdown-divider"></div>
      <a href="javascript://" clrDropdownItem>Link 1</a>
      <a href="javascript://" clrDropdownItem>Link 2</a>
    </clr-dropdown-menu>
  </clr-dropdown>

https://plnkr.co/edit/ZbXWnyMx0thImLXNTqkw?p=preview

Note: Your question helped identify an issue with using Dropdown menus like this, upon first render the menu will not have the correct position. If this affects you please subscribe to it here for updates.

https://github.com/vmware/clarity/issues/1474

Answer 2

I don't recommend using the dropdown for this purpose. Clarity doesn't have any toasts, so perhaps you could use alerts or design a different UX to address the core problem.

However, the static CSS version of the dropdown toggles the dropdown by adding the open class to the component like this:

<div class="dropdown open">
<button type="button" class="dropdown-toggle btn btn-link">
    Dropdown Toggle
    <clr-icon shape="caret down"></clr-icon>
</button>
<div class="dropdown-menu">
    <h4 class="dropdown-header">Dropdown header</h4>
    <button type="button" class="dropdown-item">Lorem.</button>
    <button type="button" class="dropdown-item">Lorem ipsum.</button>
    <button type="button" class="dropdown-item">Lorem ipsum dolor.</button>
    <div class="dropdown-divider"></div>
    <button type="button" class="dropdown-item">Link</button>
</div>

So if you are determined to use it, you could use NgClass to conditionally toggle the class.