Drop-Down Directive

Overview

The drop-down directive is a custom replacement for the CDK Overlay provided in the Angular CDK that offers you the ability to add a left or right click pop-up container to any HTML or Angular component element.

This directive was created due to compatibility issues with the CDK Overlay in Cerner Workflow Components as anything using the CDK Overlay was being rendered outside your app component and in the root document. When the component refresh button is clicked by end-users on a workflow MPage, references to the CDK overlay were lost resulting in overlays not displaying.

The MPage Developer drop-down directive solves this problem by rendering itself entirely within the context of your application component.

Required Imports

To use the drop-down directive in your component, you must import the DropdownDirective from @clinicaloffice/mpage-developer and include it in your component imports array in your component TypeScript file.

e.g. your-component.ts

import {DropdownDirective} from '@clinicaloffice/mpage-developer';

@Component({
  selector: 'your-component',
  imports: [DropdownDirective],
  templateUrl: './your-component.component.html',
  styleUrl: './your-component.component.scss',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

Usage

To use the drop-down directive, apply it to any HTML element and assign a ng-template identifier to it.

<button [coDropdown]="myMenu">Open Menu</button>

The template you apply must be in the same component and use the same name identified in the drop-down directive. The content inside your drop-down can contain any valid Angular content.

<ng-template #myMenu let-close="close">
  <div class="co-context-menu">
    <h2>Testing</h2>
    <button (click)="close()">Close Menu</button>
  </div>
</ng-template>

Multiple directives can be applied to the same element. Below, we additionally apply the coButton directive to make our button look prettier.

<button [coDropdown]="myMenu"> coButton="raised" color="primary">Open Menu</button>

Right-Click Context Menus

If you wish to change the default behavior from a left-click to right-click, pass a boolean to the rightClick input as follows.

<button [coDropdown]="myMenu" [rightClick]="true">Right Click to Open Menu</button>

Passing Data to Your Drop-Down

You can pass data to your drop-down overlay by passing an object or value to the templateContext input.

<button [coDropdown]="myMenu"> [templateContext]="{menuTitle: 'My Menu Title'}" coButton="raised" color="primary">Open Menu</button>

Your ng-template needs to assign your templateContext variable value(s). This can be done with the let- property. In the example below, we assign the variable menuTitle and use it in our template.

<ng-template #myMenu let-close="close" let-menuTitle="menuTitle">
  <div class="co-context-menu">
    <h2>{{ menuTitle }}</h2>
    <button (click)="close()" coButton="raised" color="accent">Close Menu</button>
  </div>
</ng-template>

Closing the Drop-Down

We make no assumption on how or when you wish to close your drop-down other than the default behavior of clicking outside the drop-down content area. Doing this forces the drop-down to close.

Inside your drop-down, you will want to close the overlay using the close method. This method is passed view the let-close="close" statement in your ng-template. Once added to your template, execute it with the close() method.

<ng-template #myMenu let-close="close" let-menuTitle="menuTitle">
  <div class="co-context-menu">
    <h2>{{ menuTitle }}</h2>
    <button (click)="close()" coButton="raised" color="accent">Close Menu</button>
  </div>
</ng-template>