import { Component } from '@angular/core';
RdxDropdownMenuContentDirective,
RdxDropdownMenuItemCheckboxDirective,
RdxDropdownMenuItemDirective,
RdxDropdownMenuItemIndicatorDirective,
RdxDropdownMenuItemRadioDirective,
RdxDropdownMenuItemRadioGroupDirective,
RdxDropdownMenuSeparatorDirective,
RdxDropdownMenuTriggerDirective
} from '@radix-ng/primitives/dropdown-menu';
import { Check, Dot, LucideAngularModule, Menu } from 'lucide-angular';
selector: 'dropdown-menu-demo',
styleUrl: 'dropdown-menu-demo.css',
RdxDropdownMenuTriggerDirective,
RdxDropdownMenuItemDirective,
RdxDropdownMenuItemCheckboxDirective,
RdxDropdownMenuItemIndicatorDirective,
RdxDropdownMenuSeparatorDirective,
RdxDropdownMenuContentDirective,
RdxDropdownMenuItemRadioGroupDirective,
RdxDropdownMenuItemRadioDirective
[rdxDropdownMenuTrigger]="menu"
aria-label="Customise options"
<lucide-angular [img]="MenuIcon" size="16" style="display: flex;" />
<div class="DropdownMenuContent" rdxDropdownMenuContent>
<button class="DropdownMenuItem" rdxDropdownMenuItem>
<div class="RightSlot">⌘ T</div>
<button class="DropdownMenuItem" rdxDropdownMenuItem>
<div class="RightSlot">⌘ N</div>
<button class="DropdownMenuItem" rdxDropdownMenuItem disabled>
<div class="RightSlot">⇧+⌘+N</div>
class="DropdownMenuItem DropdownMenuSubTrigger"
[rdxDropdownMenuTrigger]="share"
[side]="DropdownSide.Right"
<div class="RightSlot">></div>
<div class="DropdownMenuSeparator" rdxDropdownMenuSeparator></div>
<button class="DropdownMenuItem" [(checked)]="itemChecked1" rdxDropdownMenuItemCheckbox>
<div class="DropdownMenuItemIndicator" rdxDropdownMenuItemIndicator>
<lucide-icon [img]="CheckIcon" size="13" />
<div class="RightSlot">⌘+B</div>
<button class="DropdownMenuItem" [(checked)]="itemChecked2" rdxDropdownMenuItemCheckbox>
<div class="DropdownMenuItemIndicator" rdxDropdownMenuItemIndicator>
<lucide-icon [img]="CheckIcon" size="13" />
<div class="DropdownMenuSeparator" rdxDropdownMenuSeparator></div>
<div class="DropdownMenuLabel" rdxDropdownMenuLabel>People</div>
<div [(value)]="selectedValue" (valueChange)="onValueChange($event)" rdxDropdownMenuItemRadioGroup>
<div class="DropdownMenuRadioItem" [value]="'1'" rdxDropdownMenuItemRadio>
<div class="DropdownMenuItemIndicator" rdxDropdownMenuItemIndicator>
<lucide-icon [img]="DotIcon" size="13" strokeWidth="6" />
<div class="DropdownMenuRadioItem" [value]="'2'" rdxDropdownMenuItemRadio>
<div class="DropdownMenuItemIndicator" rdxDropdownMenuItemIndicator>
<lucide-icon [img]="DotIcon" size="13" strokeWidth="6" />
<div class="DropdownMenuSubContent" rdxDropdownMenuContent>
<button class="DropdownMenuItem" rdxDropdownMenuItem>
<div class="RightSlot">⌘+S</div>
<button class="DropdownMenuItem" rdxDropdownMenuItem>Create Shortcut...</button>
<button class="DropdownMenuItem" rdxDropdownMenuItem>Name Windows...</button>
<div class="DropdownMenuSeparator" rdxDropdownMenuSeparator></div>
<button class="DropdownMenuItem" rdxDropdownMenuItem>Developer Tools</button>
export class DropdownMenuDemo {
protected readonly MenuIcon = Menu;
protected readonly CheckIcon = Check;
protected readonly DotIcon = Dot;
protected readonly DropdownSide = DropdownSide;
onValueChange(value: string) {
this.selectedValue = value;