import { Component } from '@angular/core';
RdxSelectContentDirective,
RdxSelectItemIndicatorDirective,
RdxSelectSeparatorDirective,
RdxSelectTriggerDirective,
} from '@radix-ng/primitives/select';
import { CheckIcon, ChevronDown, LucideAngularModule } from 'lucide-angular';
selector: 'primitive-select-demo',
RdxSelectSeparatorDirective,
RdxSelectItemIndicatorDirective,
RdxSelectContentDirective,
RdxSelectTriggerDirective,
<button class="SelectTrigger" rdxSelectTrigger>
<span rdxSelectValue placeholder="Select a fruit…"></span>
<lucide-icon class="SelectIcon" [img]="LucideChevronDownIcon" size="16" rdxSelectIcon />
<div class="SelectContent SelectViewport" rdxSelectContent>
@for (group of foodGroups; track group; let last = $last) {
<div class="SelectGroup" rdxSelectGroup>
<div class="SelectLabel" rdxSelectLabel>{{ group.label }}</div>
@for (food of group.foods; track food) {
<div class="SelectItem" [value]="food.value" [disabled]="food.disabled" rdxSelectItem>
class="SelectItemIndicator"
<div class="SelectSeparator" rdxSelectSeparator></div>
styleUrl: 'select-demo.css'
export class SelectDemoComponent {
readonly LucideChevronDownIcon = ChevronDown;
readonly LucideCheckIcon = CheckIcon;
readonly foodGroups: FoodArray = [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'blueberry', label: 'Blueberry' },
{ value: 'grapes', label: 'Grapes' },
{ value: 'pineapple', label: 'Pineapple' }
{ value: 'aubergine', label: 'Aubergine' },
{ value: 'broccoli', label: 'Broccoli' },
{ value: 'carrot', label: 'Carrot', disabled: true },
{ value: 'courgette', label: 'Courgette' },
{ value: 'leek', label: 'Leek' }
{ value: 'beef', label: 'Beef' },
{ value: 'beef-with-sauce', label: 'Beef with sauce' },
{ value: 'chicken', label: 'Chicken' },
{ value: 'lamb', label: 'Lamb' },
{ value: 'pork', label: 'Pork' }
{ value: 'candies', label: 'Candies' },
{ value: 'chocolates', label: 'Chocolates' }
type FoodArray = Category[];