ng tailng

Overview

tng-menu is a dropdown menu anchored to a trigger. Use [tngMenuTrigger] for the trigger element and ng-template tngMenuTemplate for the panel content. Items with tngMenuItem close the menu on click by default. Supports placement, modal (backdrop), and (closed) with close reason.

Quick example

Basic
HTMLTSCSS

<tng-menu>
  <button tngMenuTrigger type="button" class="...">Open menu</button>
  <ng-template tngMenuTemplate>
    <button tngMenuItem type="button" class="...">Profile</button>
    <button tngMenuItem type="button" class="...">Settings</button>
    <button tngMenuItem type="button" class="...">Logout</button>
  </ng-template>
</tng-menu>

Features

Trigger & template

Project trigger with [tngMenuTrigger]. Menu content in ng-template tngMenuTemplate. Use tngMenuItem on clickable items to auto-close on selection.

Placement & modal

placement: bottom-start, bottom-end, top-start, top-end. modal: show backdrop and close on outside click / escape.

Class hooks

slot.container, slot.trigger, slot.panel, slot.backdrop for theming.