{{ errorMessage }}
+{{ hint }}
+{{ subtitle }}
+
+ One reusable <app-dropdown>
+ covering single-select, multi-select, tag input, and grouped options — switch behavior with the
+ type input. Works with both
+ ngModel and reactive forms.
+
Set type="single" — or omit it, since it's the default.
Selected value: {{ singleValue || '—' }}
+ +{{ singleSnippet }}
+ Set type="multiple". Value becomes an array.
+ Selected values: {{ multiValue.length ? multiValue.join(', ') : '—' }} +
+ +{{ multiSnippet }}
+ Set type="tags" to also let users type free-text entries not in the list.
{{ tagsSnippet }}
+
+ Set type="grouped" and groupBy to the field name holding each option's group label.
+
{{ groupedSnippet }}
+
+ Bind [formControl] instead of ngModel — the component implements
+ ControlValueAccessor, so both work identically.
+
{{ reactiveFormSnippet }}
+ + Options display both a primary title and a secondary explanatory description underneath. +
+Selected plan: {{ planValue || '—' }}
+ +{{ descriptionSnippet }}
+ + Search box is embedded directly inside the dropdown option drawer. Searches query the remote API in real-time with 300ms debounce. Scrolling to the bottom loads the next page of 10 items. +
+{{ serverSearchSnippet }}
+ | Property | +Type | +Description | +
|---|---|---|
| type | +'single' | 'multiple' | 'tags' | 'grouped' | +Controls select behavior. Default: 'single'. | +
| items | +DropdownOption[] | any[] | +Option list to render. Supports { label, value, description?, group? }. | +
| showDrawerSearch | +boolean | +Pins an interactive search input inside the dropdown option drawer. | +
| serverSearch | +boolean | +Bypasses local filtering to let the backend API manage results directly. | +
| loadingMore | +boolean | +Shows a loading spinner in the drawer footer while loading the next page. | +
| hasMore | +boolean | +Controls whether infinite scroll continues triggering next page requests. | +
| bindLabel / bindValue | +string | +Field names to read the label/value from, for custom option shapes. | +
| bindDescription | +string | +Field name holding the short description subtitle. Default: 'description'. | +
| (searchChange) | +EventEmitter<string> | +Emits debounced search string (300ms) for direct backend API calls. | +
| (scrollToEnd) | +EventEmitter<void> | +Fires when user scrolls to the bottom of the drawer to fetch the next page. | +
| (selectionChange) | +EventEmitter<any> | +Emits on every selection change, in addition to ngModel/formControl updates. | +
+ Create and manage team records via ABP Modal forms with dropdowns, inputs, radio selections, and card displays. +
+{{ member.role }}
++ {{ member.description }} +
++ No team members match your filter query. Click below to add a new member. +
+ +
+ Configured via FormlyFieldConfig[] with Formly & ABP Theme Shared
+
+ {{ '::LongWelcomeMessage' | abpLocalization }} +
+ {{ + 'AbpAccount::Login' | abpLocalization }} + } + +Learn how to customize LeptonX Theme as you wish.
+ Customize Lepton +
+ + A unique community platform for + ABP Lovers! +
++ Explore all ABP users' experiences with the ABP Framework, discover articles and videos on + how to use ABP, and join raffles for a chance to win surprise gifts! +
+ Join ABP Community +
+ THE OFFICIAL GUIDE
++ Written by the creator of the ABP Framework, this book will help you gain a complete + understanding of the framework and modern web application development techniques. +
+ +
+ |
+ @if(item.icon){
+
+ @if(item.iconType === 'image'){
+
+ }
+ {{ item.title }}
+ |
+ + + + + | +
<abp-modal>) — Usage Guide
+ Built using official ABP Theme Shared components: import { ModalComponent, ModalCloseDirective } from '@abp/ng.theme.shared'. Fully customized to match our dark/light theme layout.
+
<abp-modal>)Standard informational dialog using #abpHeader, #abpBody, and #abpFooter.
+ This dialog is rendered directly via ABP's official <abp-modal> component.
+
+ It seamlessly inherits our global CSS custom property tokens for borders, surfaces, fonts, and dark mode overrides. +
+{{ basicSnippet }}
+ abpClose)Compact dialog utilizing abpClose directive on cancel button.
+ Are you sure you want to permanently delete this repository and all linked tenant configurations? +
+{{ confirmSnippet }}
+ [busy]="isBusy")
+ Full stack: abp-modal + app-dynamic-form + app-dropdown.
+
{{ formModalSnippet }}
+ | Binding / Directive | +Type | +Description | +
|---|---|---|
| [(visible)] | +boolean | +Two-way binding controlling modal visibility. | +
| [busy] | +boolean | +Displays a loading overlay spinner inside the modal while processing async tasks. | +
| [options] | +{ size?: 'sm' | 'md' | 'lg' | 'xl', centered?: boolean, scrollable?: boolean } | +Modal configuration options. | +
| #abpHeader | +TemplateRef | +Header template projected into the top modal bar. | +
| #abpBody | +TemplateRef | +Main content body template. | +
| #abpFooter | +TemplateRef | +Footer actions template. | +
| abpClose | +Directive | +Directive attached to any button to automatically dismiss the modal on click. | +
Projected modal body content styled according to current theme.
+Are you sure you want to permanently delete this repository and all linked data?
+