# Import Map - Package Exports Reference > **Critical**: Always import from the correct package. This is the #1 cause of compilation errors. > **Auto-generated**: This file is automatically generated from Taiga UI source code. --- ## @taiga-ui/core **Components:** ### button ```text TuiButton, TuiButtonOptions ``` ### calendar ```text TuiCalendar, TuiCalendarOptions, TuiCalendarSheet, TuiCalendarSheetOptions, TuiCalendarSheetPipe, TuiCalendarSpin, TuiCalendarYear, TuiMarkerHandler, TuiOrderWeekDaysPipe ``` ### carousel ```text TuiCarousel, TuiCarouselComponent, TuiCarouselDirective ``` ### cell ```text TuiCell, TuiCellOptions, TuiCellResponsive, TuiCellStretch ``` ### checkbox ```text TuiCheckbox, TuiCheckboxOptions ``` ### data-list ```text TuiDataList, TuiDataListAccessor, TuiDataListComponent, TuiDataListHost, TuiOptGroup, TuiOption, TuiOptionWithContent, TuiOptionWithValue, TuiWithOptionContent ``` ### error ```text TuiError, TuiErrorComponent, TuiErrorDirective, TuiErrorField, TuiErrorPipe ``` ### expand ```text TuiExpand ``` ### icon ```text TuiIcon, TuiIconPipe ``` ### input ```text TuiInput, TuiInputDirective, TuiWithInput ``` ### label ```text TuiLabel ``` ### link ```text TuiLink ``` ### loader ```text TuiLoader, TuiLoaderOptions ``` ### notification ```text TuiNotification, TuiNotificationComponent, TuiNotificationDirective, TuiNotificationOptions, TuiNotificationService, TuiNotificationTemplate ``` ### radio ```text TuiRadio, TuiRadioComponent, TuiRadioDirective, TuiRadioOptions ``` ### root ```text TuiRoot ``` ### scrollbar ```text TuiScrollControls, TuiScrollControlsService, TuiScrollIntoView, TuiScrollRef, TuiScrollable, TuiScrollbar, TuiScrollbarDirective, TuiScrollbarOptions, TuiScrollbarPosition, TuiScrollbarService ``` ### slider ```text TuiKeySteps, TuiSlider, TuiSliderComponent, TuiSliderKeySteps, TuiSliderKeyStepsBase, TuiSliderReadonly, TuiSliderThumbLabel ``` ### spin-button ```text TuiSpinButton ``` ### textfield ```text TuiSelectLike, TuiTextfield, TuiTextfieldAccessor, TuiTextfieldComponent, TuiTextfieldContent, TuiTextfieldItem, TuiTextfieldItemComponent, TuiTextfieldMultiComponent, TuiTextfieldOptions, TuiTextfieldOptionsDirective TuiWithNativePicker ``` ### title ```text TuiTitle ``` **Directives:** ### appearance ```text TuiAppearance, TuiAppearanceOptions, TuiWithAppearance ``` ### button-x ```text TuiButtonX ``` ### date-format ```text TuiDateFormat ``` ### group ```text TuiGroup, TuiGroupOptions ``` ### icons ```text TuiIcons, TuiWithIcons ``` ### items-handlers ```text TuiItemsHandlers, TuiItemsHandlersDirective, TuiItemsHandlersValidator, TuiWithItemsHandlers ``` ### number-format ```text TuiNumberFormat ``` **Pipes:** ### filter-by-input ```text TuiFilterByInputOptions, TuiFilterByInputPipe ``` ### format-number ```text TuiFormatNumberPipe ``` **Services:** ### root ```text TuiPositionService, TuiVisualViewportService ``` **Types:** ### root ```text TuiHorizontalDirection, TuiInteractiveState, TuiOrientation, TuiPoint, TuiSizeL TuiSizeM, TuiSizeS, TuiSizeXL, TuiSizeXS, TuiSizeXXL TuiSizeXXS, TuiVerticalDirection ``` **Tokens:** ### root ```text TuiBreakpointMediaKey, TuiCommonIcons, TuiDateFormatSettings, TuiDateFormatSettings, TuiDecimalMode TuiDecimalSymbol, TuiMedia, TuiNumberFormatSettings, TuiNumberFormatSettings ``` **Utilitys:** ### miscellaneous ```text TuiOptions ``` **Classs:** ### root ```text TuiPositionAccessor ``` --- ## @taiga-ui/kit **Components:** ### accordion ```text TuiAccordion, TuiAccordionComponent, TuiAccordionDirective ``` ### action-bar ```text TuiActionBar ``` ### avatar ```text TuiAvatar, TuiAvatarLabeled, TuiAvatarOptions, TuiAvatarOutline, TuiAvatarStack ``` ### badge ```text TuiBadge, TuiBadgeOptions ``` ### badge-notification ```text TuiBadgeNotification, TuiBadgeNotificationOptions ``` ### badged-content ```text TuiBadgedContent, TuiBadgedContentComponent, TuiBadgedContentDirective ``` ### block ```text TuiBlock, TuiBlockOptions ``` ### breadcrumbs ```text TuiBreadcrumbs, TuiBreadcrumbsOptions ``` ### button-loading ```text TuiButtonLoading ``` ### calendar-month ```text TuiCalendarMonth, TuiCalendarMonthOptions ``` ### calendar-range ```text TuiCalendarRange, TuiDayRangePeriod ``` ### chip ```text TuiChip, TuiChipOptions ``` ### combo-box ```text TuiComboBox, TuiComboBoxDirective ``` ### comment ```text TuiComment ``` ### compass ```text TuiCompass ``` ### confirm ```text TuiConfirm, TuiConfirmData, TuiConfirmService ``` ### copy ```text TuiButtonCopy, TuiCopy, TuiCopyComponent, TuiCopyDirective, TuiCopyOptions ``` ### counter ```text TuiCounter, TuiCounterOptions ``` ### data-list-wrapper ```text TuiDataListGroupWrapperComponent, TuiDataListWrapper, TuiDataListWrapperComponent ``` ### drawer ```text TuiDrawer ``` ### files ```text TuiFile, TuiFileLike, TuiFileOptions, TuiFileRejectedPipe, TuiFileState, TuiFiles, TuiFilesComponent, TuiInputFiles, TuiInputFilesContent, TuiInputFilesDirective TuiInputFilesOptions, TuiInputFilesValidator ``` ### filter ```text TuiFilter ``` ### fullscreen ```text TuiFullscreen ``` ### input-chip ```text TuiInputChip, TuiInputChipComponent, TuiInputChipDirective, TuiInputChipOptions ``` ### input-color ```text TuiInputColor, TuiInputColorComponent, TuiInputColorContent, TuiInputColorOptions ``` ### input-date ```text TuiInputDate, TuiInputDateComponent, TuiInputDateContent, TuiInputDateDirective, TuiInputDateOptions ``` ### input-date-multi ```text TuiInputDateMulti, TuiInputDateMultiDirective, TuiInputDateMultiOptions ``` ### input-date-range ```text TuiInputDateRange, TuiInputDateRangeDirective, TuiInputDateRangeOptions ``` ### input-date-time ```text TuiInputDateTime, TuiInputDateTimeComponent, TuiInputDateTimeContent, TuiInputDateTimeDirective, TuiInputDateTimeOptions ``` ### input-inline ```text TuiInputInline ``` ### input-month ```text TuiInputMonth, TuiInputMonthComponent, TuiInputMonthContent, TuiInputMonthDirective, TuiInputMonthOptions ``` ### input-month-range ```text TuiInputMonthRange, TuiInputMonthRangeDirective, TuiInputMonthRangeOptions ``` ### input-number ```text TuiBigIntQuantumValueTransformer, TuiBigIntValueTransformer, TuiInputNumber, TuiInputNumberDirective, TuiInputNumberOptions, TuiInputNumberStep, TuiInputNumberStepButtons, TuiInputNumberStepService, TuiNumberMask, TuiNumberValueTransformer TuiQuantumValueTransformer, TuiQuantumValueTransformerBase, TuiWithNumberMask ``` ### input-phone ```text TuiInputPhone, TuiInputPhoneDirective, TuiInputPhoneOptions ``` ### input-phone-international ```text TuiInputPhoneInternational, TuiInputPhoneInternationalComponent, TuiInputPhoneInternationalContent, TuiInputPhoneInternationalOptions ``` ### input-pin ```text TuiInputPin, TuiInputPinComponent, TuiInputPinContent ``` ### input-range ```text TuiInputRange ``` ### input-slider ```text TuiInputSlider, TuiInputSliderDirective ``` ### input-time ```text TuiInputTime, TuiInputTimeComponent, TuiInputTimeContent, TuiInputTimeDirective, TuiInputTimeOptions ``` ### input-year ```text TuiInputYear, TuiInputYearDirective, TuiInputYearOptions ``` ### items-with-more ```text TuiItemsWithMore, TuiItemsWithMoreComponent, TuiItemsWithMoreDirective, TuiItemsWithMoreService, TuiMore ``` ### like ```text TuiLike, TuiLikeOptions ``` ### line-clamp ```text TuiLineClamp, TuiLineClampBox, TuiLineClampFallback, TuiLineClampOptions, TuiLineClampPositionDirective ``` ### message ```text TuiMessage ``` ### meter ```text TuiMeter ``` ### multi-select ```text TuiMultiSelect, TuiMultiSelectGroupComponent, TuiMultiSelectGroupDirective, TuiMultiSelectNative, TuiMultiSelectOption ``` ### notification-middle ```text TuiNotificationMiddle, TuiNotificationMiddleComponent, TuiNotificationMiddleOptions, TuiNotificationMiddleService ``` ### pager ```text TuiPager ``` ### pagination ```text TuiPagination, TuiPaginationOptions ``` ### pin ```text TuiPin ``` ### pincode ```text TuiPincode, TuiPincodeComponent, TuiPincodeContent ``` ### preview ```text TuiPreview, TuiPreviewAction, TuiPreviewComponent, TuiPreviewDialog, TuiPreviewDialogDirective, TuiPreviewDialogService, TuiPreviewIcons, TuiPreviewPagination, TuiPreviewTitle, TuiPreviewZoom ``` ### progress ```text TuiProgress, TuiProgressBar, TuiProgressCircle, TuiProgressColorSegments, TuiProgressFixedGradientDirective, TuiProgressLabel, TuiProgressOptions, TuiProgressSegmented ``` ### pulse ```text TuiPulse ``` ### push ```text TuiPush, TuiPushAlert, TuiPushComponent, TuiPushDirective, TuiPushOptions, TuiPushService ``` ### radio-list ```text TuiRadioList ``` ### range ```text TuiRange, TuiRangeChange ``` ### rating ```text TuiRating, TuiRatingContext, TuiRatingOptions ``` ### segmented ```text TuiSegmented, TuiSegmentedDirective ``` ### select ```text TuiNativeSelect, TuiSelect, TuiSelectDirective, TuiSelectOption ``` ### shrink-wrap ```text TuiShrinkWrap, TuiShrinkWrapComponent, TuiShrinkWrapDirective ``` ### status ```text TuiStatus ``` ### stepper ```text TuiStep, TuiStepper, TuiStepperComponent ``` ### switch ```text TuiSwitch, TuiSwitchOptions ``` ### tabs ```text TuiTab, TuiTabs, TuiTabsDirective, TuiTabsHorizontal, TuiTabsOptions, TuiTabsVertical, TuiTabsWithMore ``` ### textarea ```text TuiTextarea, TuiTextareaComponent, TuiTextareaContent, TuiTextareaDirective, TuiTextareaOptions ``` ### tiles ```text TuiReorderFunction, TuiTile, TuiTileHandle, TuiTileService, TuiTiles, TuiTilesComponent ``` ### timeline ```text TuiTimeline, TuiTimelineComponent, TuiTimelineItem ``` ### toast ```text TuiToast, TuiToastComponent, TuiToastDirective, TuiToastOptions, TuiToastService, TuiToastTemplate ``` ### tree ```text TuiTree, TuiTreeAccessor, TuiTreeChildren, TuiTreeComponent, TuiTreeContext, TuiTreeController, TuiTreeControllerDirective, TuiTreeItem, TuiTreeItemContent, TuiTreeItemContext TuiTreeItemController, TuiTreeLoader, TuiTreeNode, TuiTreeService ``` **Directives:** ### appearance-proxy ```text TuiAppearanceProxy ``` ### button-group ```text TuiButtonGroup ``` ### button-select ```text TuiButtonSelect ``` ### chevron ```text TuiChevron ``` ### connected ```text TuiConnected ``` ### data-list-dropdown-manager ```text TuiDataListDropdownManager ``` ### fade ```text TuiFade ``` ### fluid-typography ```text TuiFluidTypography, TuiFluidTypographyOptions ``` ### highlight ```text TuiHighlight ``` ### password ```text TuiPassword, TuiPasswordOptions ``` ### present ```text TuiPresent ``` ### sensitive ```text TuiSensitive ``` ### shimmer ```text TuiShimmer ``` ### skeleton ```text TuiSkeleton ``` ### time-format ```text TuiTimeFormat ``` ### tooltip ```text TuiTooltip ``` ### unfinished-validator ```text TuiUnfinishedValidator, TuiUnfinishedValidatorRefresh ``` ### unmask-handler ```text TuiUnmaskHandler ``` **Pipes:** ### auto-color ```text TuiAutoColorPipe ``` ### emails ```text TuiEmailsPipe ``` ### flag ```text TuiFlagPipe ``` ### format-number ```text TuiFormatNumberPipe ``` ### hide-selected ```text TuiHideSelectedPipe ``` ### initials ```text TuiInitialsPipe ``` ### sort-countries ```text TuiSortCountriesPipe ``` ### stringify ```text TuiStringifyPipe ``` ### stringify-content ```text TuiStringifyContentPipe ``` **Tokens:** ### root ```text TuiTimeFormatSettings ``` --- ## @taiga-ui/cdk **Directives:** ### active-zone ```text TuiActiveZone ``` ### animated ```text TuiAnimated ``` ### auto-focus ```text TuiAutoFocus, TuiAutofocusHandler, TuiAutofocusOptions, TuiDefaultAutofocusHandler, TuiIosAutofocusHandler, TuiSynchronousAutofocusHandler ``` ### control ```text TuiNgControl ``` ### copy-processor ```text TuiCopyProcessor ``` ### element ```text TuiElement ``` ### focus-trap ```text TuiFocusTrap ``` ### font-size ```text TuiFontSize ``` ### high-dpi ```text TuiHighDpi ``` ### hovered ```text TuiHovered, TuiHoveredService ``` ### id ```text TuiId ``` ### item ```text TuiItem ``` ### media ```text TuiMedia ``` ### native-validator ```text TuiNativeValidator ``` ### obscured ```text TuiObscured, TuiObscuredService ``` ### pan ```text TuiPan, TuiPanService ``` ### platform ```text TuiPlatform ``` ### resizer ```text TuiResizable, TuiResizer ``` ### swipe ```text TuiSwipe, TuiSwipeDirection, TuiSwipeEvent, TuiSwipeOptions, TuiSwipeService ``` ### transitioned ```text TuiTransitioned ``` ### truncate ```text TuiTruncate, TuiTruncateService ``` ### validator ```text TuiValidator ``` ### value-changes ```text TuiValueChanges ``` ### vcr ```text TuiVCR ``` ### visual-viewport ```text TuiVisualViewport ``` ### with-styles ```text TuiWithStyles ``` ### zoom ```text TuiZoom, TuiZoomEvent, TuiZoomOptions, TuiZoomService ``` **Pipes:** ### filter ```text TuiFilterPipe ``` ### mapper ```text TuiMapperPipe ``` ### obfuscate ```text TuiObfuscateOptions, TuiObfuscatePipe ``` **Types:** ### root ```text TuiBooleanHandler, TuiCompatValidationError, TuiContext, TuiHandler, TuiIdentityMatcher TuiMapper, TuiMatcher, TuiNumberHandler, TuiRounding, TuiSignalValidationError TuiStringHandler, TuiStringMatcher ``` **Utilitys:** ### focus ```text TuiGetClosestFocusableOptions ``` **Classs:** ### root ```text TuiFormValueControl, TuiNonNullableValueTransformer, TuiValidationError ``` --- ## @taiga-ui/experimental **Components:** ### calendar ```text TuiCalendar, TuiCalendarComponent, TuiCalendarHeader, TuiCalendarMobileComponent, TuiCalendarMultiComponent ``` ### data-grid ```text TuiDataGrid ``` ### file ```text TuiFile, TuiFileOptions, TuiFilePipe ``` ### month ```text TuiMonthComponent, TuiMonthOptions, TuiWeekPipe ``` ### popout ```text TuiPopout, TuiPopoutComponent, TuiPopoutOptions, TuiPopoutService ``` ### scroll-wheel ```text TuiScrollWheel, TuiScrollWheelItem ``` ### search-results ```text TuiSearchHistory, TuiSearchHotkey, TuiSearchResults, TuiSearchResultsComponent ``` --- ## @taiga-ui/layout **Components:** ### app-bar ```text TuiAppBar, TuiAppBarBack, TuiAppBarButton, TuiAppBarComponent, TuiAppBarDirective, TuiAppBarSizeDirective ``` ### block-details ```text TuiBlockDetails ``` ### block-status ```text TuiBlockStatus, TuiBlockStatusComponent, TuiBlockStatusDirective ``` ### card ```text TuiCard, TuiCardCollapsed, TuiCardLarge, TuiCardMedium, TuiCardOptions, TuiCardRow ``` ### dynamic-header ```text TuiDynamicHeader, TuiDynamicHeaderAnchorDirective, TuiDynamicHeaderComponent, TuiDynamicHeaderContainerDirective ``` ### elastic-container ```text TuiElasticContainer, TuiElasticContainerDirective ``` ### floating-container ```text TuiFloatingContainer ``` ### form ```text TuiForm, TuiFormOptions ``` ### header ```text TuiHeader ``` ### input-search ```text TuiInputSearch, TuiInputSearchContent ``` ### item-group ```text TuiItemGroup ``` ### list ```text TuiList, TuiListOptions ``` ### navigation ```text TuiAsideComponent, TuiAsideGroupComponent, TuiAsideItemDirective, TuiDrawerDirective, TuiHeaderComponent, TuiHintAsideDirective, TuiLogoComponent, TuiMainComponent, TuiNavComponent, TuiNavigation TuiSubheaderCompactComponent, TuiSubheaderComponent ``` ### pdf-viewer ```text TuiPdfViewer ``` ### progressive-blur ```text TuiProgressiveBlur ``` ### search ```text TuiSearch, TuiSearchComponent, TuiSearchFilterComponent, TuiSearchFiltersComponent ``` ### slides ```text TuiSlides ``` ### surface ```text TuiSurface ``` **Tokens:** ### root ```text TuiCommonIcons, TuiLayoutIcons ``` --- ## @taiga-ui/addon-commerce **Components:** ### input-card ```text TuiInputCVCDirective, TuiInputCard, TuiInputCardComponent, TuiInputCardContent, TuiInputExpireDirective ``` ### input-card-group ```text TuiCard, TuiCardGroupedTexts, TuiCardInputs, TuiInputCardGroup, TuiInputCardGroupDirective, TuiInputCardGroupOptions ``` ### thumbnail-card ```text TuiThumbnailCard, TuiThumbnailCardOptions ``` **Pipes:** ### amount ```text TuiAmountOptions, TuiAmountPipe, TuiAmountSign, TuiAmountSignSymbol ``` ### currency ```text TuiCurrencyPipe ``` ### decimal ```text TuiDecimalPipe ``` ### format-card ```text TuiFormatCardPipe ``` **Types:** ### root ```text TuiCurrency, TuiCurrencyAutocompletion, TuiCurrencyCode, TuiCurrencyVariants, TuiPaymentSystem ``` --- ## @taiga-ui/addon-mobile **Components:** ### bottom-sheet ```text TuiBottomSheet, TuiBottomSheetOptions ``` ### keypad ```text TuiKeypad ``` ### mobile-calendar ```text TuiMobileCalendar, TuiMobileCalendarStrategy ``` ### mobile-calendar-dropdown ```text TuiMobileCalendarData, TuiMobileCalendarDropdown, TuiMobileCalendarDropdownComponent ``` ### mobile-calendar-sheet ```text TuiMobileCalendarSheet ``` ### pull-to-refresh ```text TuiMobileLoaderAndroid, TuiMobileLoaderIOS, TuiPullToRefresh, TuiPullToRefreshService ``` ### search-bar ```text TuiSearchBar, TuiSearchBarComponent, TuiSearchBarInput, TuiSearchBarOptions ``` ### sheet-dialog ```text TuiSheetDialog, TuiSheetDialogClose, TuiSheetDialogComponent, TuiSheetDialogOptions, TuiSheetDialogService ``` ### swipe-actions ```text TuiSwipeActions, TuiSwipeActionsAutoClose, TuiSwipeActionsOnboarding ``` ### tab-bar ```text TuiTabBar, TuiTabBarComponent, TuiTabBarItem, TuiTabBarItemDirective, TuiTabBarLiquidGlass ``` **Directives:** ### dropdown-mobile ```text TuiDropdownMobile, TuiDropdownMobileComponent ``` ### dropdown-sheet ```text TuiDropdownSheet, TuiDropdownSheetComponent ``` ### elastic-sticky ```text TuiElasticSticky, TuiElasticStickyService ``` ### responsive-dialog ```text TuiResponsiveDialog, TuiResponsiveDialogOptions, TuiResponsiveDialogService ``` ### ripple ```text TuiRipple ``` ### touchable ```text TuiTouchable ``` **Services:** ### root ```text TuiKeyboardService, TuiThemeColorService ``` --- ## @taiga-ui/addon-table **Components:** ### reorder ```text TuiReorder, TuiReorderOptions ``` ### table ```text TuiSortChange, TuiSortDirection, TuiSortDirection, TuiSorterPipe, TuiStuck, TuiTable, TuiTableCaption, TuiTableCell, TuiTableDirective, TuiTableExpand TuiTableHead, TuiTableOptions, TuiTableResized, TuiTableSortBy, TuiTableSortChange, TuiTableSortKeyException, TuiTableSortPipe, TuiTableSortable, TuiTableTbody, TuiTableTbodyDirective TuiTableTd, TuiTableTh, TuiTableThGroup, TuiTableThead, TuiTableTr ``` ### table-pagination ```text TuiTablePagination, TuiTablePaginationEvent, TuiTablePaginationOptions ``` **Directives:** ### table-control ```text TuiCheckboxRowDirective, TuiCheckboxTableDirective, TuiTableControl, TuiTableControlDirective ``` ### table-filters ```text TuiGenericFilter, TuiTableFilter, TuiTableFilterDirective, TuiTableFilters, TuiTableFiltersDirective, TuiTableFiltersPipe ``` **Types:** ### root ```text TuiComparator ``` --- ## @taiga-ui/addon-charts **Components:** ### arc-chart ```text TuiArcChart ``` ### axes ```text TuiAxes ``` ### bar ```text TuiBar ``` ### bar-chart ```text TuiBarChart ``` ### bar-set ```text TuiBarSet ``` ### chart-hint ```text TuiChartHint ``` ### legend-item ```text TuiLegendItem ``` ### line-chart ```text TuiLineChart, TuiLineChartHint, TuiLineChartOptions ``` ### line-days-chart ```text TuiLineDaysChart, TuiLineDaysChartHint ``` ### pie-chart ```text TuiPieChart, TuiPieChartDirective ``` ### ring-chart ```text TuiRingChart ``` **Types:** ### root ```text TuiLineChartHintContext, TuiLineHandler, TuiLineType ``` --- ## Angular Common Imports **Structural Directives (consider using Angular 17+ control flow instead):** ```typescript import {NgIf, NgFor, NgSwitch} from '@angular/common'; // Modern alternative: @if, @for, @switch ``` **Forms:** ```typescript import {FormsModule, ReactiveFormsModule} from '@angular/forms'; ``` **Other Common:** ```typescript import {CommonModule} from '@angular/common'; import {AsyncPipe, DatePipe, DecimalPipe} from '@angular/common'; ``` --- # Code Generation Checklist > **Before returning ANY generated Angular component code, verify ALL items below.** ## Imports - All `Tui*` symbols imported from the correct package (see **Import Map** section above) - `FormsModule` imported if template uses `[(ngModel)]` - `ReactiveFormsModule` imported if using `FormControl` / `FormGroup` - All used components, directives, and pipes listed in `@Component.imports` array ## Template Rules - No arrow functions in template expressions — move logic to component class (getters / methods) - No complex expressions in templates — keep templates simple, delegate to TypeScript - Null safety: use `?.` optional chaining or `@if` / `*ngIf` guards before accessing nullable values ## Event Handlers - Event handler parameters use the correct Taiga UI type (e.g. `TuiDay`, `TuiDayRange`), not DOM `Event` - Check the component's **API - Outputs** section for the exact emitted type ## CDK Types - Date/time values use Taiga UI CDK types (`TuiDay`, `TuiMonth`, `TuiTime`, etc.), not native `Date` or plain numbers - CDK types imported from `@taiga-ui/cdk` (see **CDK Types Reference** section) ## Component Setup - `changeDetection: ChangeDetectionStrategy.OnPush` is set - Do NOT copy `@demo/emulate/*` imports from demo code — use standard Angular APIs instead - Verify component properties exist in the API documentation before using them --- # Common Mistakes > **These are the most frequent errors when using Taiga UI. Avoid them.** ## 1. Wrong Import Package The #1 cause of compilation errors. Always check the **Import Map** section to find the correct package for each symbol. ## 2. Arrow Functions in Templates Angular templates do not support arrow functions in interpolation or property binding expressions. Move logic to the component class as getters or methods. **Wrong:** `{{ items.map(x => x.name).join(', ') }}` **Right:** Create a getter `get itemNames(): string` in the component class and use `{{ itemNames }}` in the template. ## 3. Missing FormsModule If using `[(ngModel)]`, you must add `FormsModule` to the component's `imports` array. For reactive forms (`formControl`, `formGroup`), add `ReactiveFormsModule`. ## 4. Null Safety Calling methods on potentially null values causes runtime errors. Use optional chaining (`?.`) in templates or guard with `@if` / `*ngIf`. ## 5. Wrong Event Parameter Type Output events from Taiga UI components emit specific types (e.g. `TuiDay`, `TuiDayRange`, `TuiMonth`), not DOM `Event`. Check the component's **API - Outputs** section. ## 6. Using Plain Numbers for Date/Time Taiga UI date components work with `TuiDay`, `TuiMonth`, `TuiYear`, `TuiTime` — not plain numbers or native `Date`. See the **CDK Types Reference** section. ## 7. Copying Demo-Only Imports Demo pages use internal imports like `@demo/emulate/change-detection`. In real code, use `ChangeDetectionStrategy.OnPush` from `@angular/core` directly. ## 8. Missing Structural Directive Imports When using structural directives (e.g. `*tuiDropdown`, `*tuiItem`), the corresponding directive class must be in the component's `imports` array. Check the **Import Map** for the correct package. --- # Getting Started ## addons.md ```bash npm i @taiga-ui/addon-charts // Components for various charts, graphs and visualizations npm i @taiga-ui/addon-commerce // Money-related extension with currencies, credit card inputs and validators npm i @taiga-ui/addon-mobile // Components and tools specific to mobile version of the app npm i @taiga-ui/addon-table // Interactive table component and related utilities npm i @taiga-ui/addon-doc // Taiga UI based library for developing documentation portals for Angular libraries npm i @taiga-ui/layout // Layout components ``` --- ## angular-json-styles.md ```json { "projects": { "my-project": { "architect": { "build": { "options": { "styles": [ "@taiga-ui/styles/taiga-ui-theme.less", "@taiga-ui/styles/taiga-ui-fonts.less", "@taiga-ui/addon-mobile/styles/taiga-ui-mobile.less" // optional ] } } } } } } ``` --- ## app-standalone.md ```ts import {TuiRoot} from '@taiga-ui/core'; // .. @Component({ selector: 'app-root', imports: [ TuiRoot, // ... ], templateUrl: './app.component.html', }) export class App {} ``` --- ## app-template.md ```html ``` --- ## assets.md ```json { "projects": { "my-project": { "architect": { "build": { // ... "assets": [ { "glob": "**/*", "input": "node_modules/@taiga-ui/icons/src", "output": "assets/taiga-ui/icons" } ] } } } } } ``` --- ## config.md ```ts export interface TuiOptions { // Omit to use OS theme, this is the default readonly mode?: 'dark' | 'light'; // Scale text with OS font size, enabled by default readonly fontScaling: boolean; // Global window scrollbars, 'custom' by default readonly scrollbars: 'custom' | 'native'; // Opt-in to experimental features as they are introduced, 'stable' by default readonly apis: 'stable' | {all: boolean} | Record; } ``` --- ## index.md ```html ... ... ``` --- ## main-standalone.md ```ts import {provideTaiga} from '@taiga-ui/core'; // ... bootstrapApplication(App, { providers: [ provideTaiga(), //... ], }).catch(console.error); ``` --- ## main.md ```bash npm i @taiga-ui/{cdk,core,kit,icons} ``` --- ## main.server.md ```ts import {bootstrapApplication, type BootstrapContext} from '@angular/platform-browser'; import {mergeApplicationConfig, type ApplicationRef} from '@angular/core'; import {provideServerRendering} from '@angular/platform-server'; import {provideUniversal} from '@ng-web-apis/universal'; import {appConfig} from './app.config'; const serverConfig = mergeApplicationConfig(appConfig, { providers: [provideServerRendering(), provideUniversal()], }); export default async (context: BootstrapContext): Promise => bootstrapApplication(App, serverConfig, context); ``` --- ## nx-add.md ```bash npm i taiga-ui nx g taiga-ui:ng-add ``` --- ## nx-assets.md ```json { "targets": { "build": { "options": { // ... "assets": [ { "glob": "**/*", "input": "node_modules/@taiga-ui/icons/src", "output": "assets/taiga-ui/icons" } ] } } } } ``` --- ## nx-migrate.md ```bash nx migrate @taiga-ui/cdk nx migrate --run-migrations=migrations.json ``` --- ## ponyfill.md ```bash npm install css-vars-ponyfill ``` --- ## project-json-styles.md ```json { "targets": { "build": { "options": { "styles": [ "@taiga-ui/styles/taiga-ui-theme.less", "@taiga-ui/styles/taiga-ui-fonts.less", "@taiga-ui/addon-mobile/styles/taiga-ui-mobile.less" // optional ] } } } } ``` --- # Migration Guide > **Guide to update Taiga UI v{CURRENT_MAJOR} -> v{NEXT_MAJOR}** ## Before You Update - [ ] Use Node.js LTS, NPM v10 or higher. - [ ] Update Taiga UI version to latest v{CURRENT_MAJOR}. - [ ] Update Angular version to v19 or higher. - [ ] Ensure Prettier’s endOfLine option is set to auto for fix some issues with end of line after migration. ## Updating - [ ] Run migration schematics **Angular CLI:** ```bash ng update @taiga-ui/cdk ``` **Nx CLI:** ```bash nx migrate @taiga-ui/cdk nx migrate --run-migrations=migrations.json ``` - [ ] Review all changed code lines. Some of them contain new code comments (something like // TODO: (Taiga UI migration) ). In most cases these comments contain instructions how to manually migrate some deleted entities by new alternative. - [ ] You can find out that your codebase now contains some imports from @taiga-ui/legacy . This package is a transitional state for many outdated entities before their full removal. Everything you find inside this package in the {NEXT_MAJOR}th major release will be removed in the {NEXT_MAJOR}th one. So, you can just continue to use them for a while. However, some of those components already have modern alternatives – they will be marked by comment with @deprecated tag (most IDEs displays the such entities as stricken-through). We strongly recommend to replace them by new alternatives as soon as possible! ## Troubleshooting **Problem:** After running the migration schematics, I have a large amount of TypeScript errors TS6133: is declared but its value is never read. **Solution:** We don't include any code formatting in our schematics on purpose. Otherwise, it will drastically slow down the overall process of schematics execution. So, use well-optimized prettier/eslint rules and power of your IDEs . If you are WebStorm user. Just make right click on the root folder with the codebase of your recently migrated application. Choose "Optimize imports" from the context menu. It will automatically remove all unused imports across all the files in that folder. If you are Visual Studio Code user. Use an Folder source actions extension to trigger built-in Organize Imports action in all files recursively in the root folder with the codebase of your recently migrated application. **Problem:** I use Yarn or cannot get rid of legacy-peer-deps and I need a workaround. Or, I ran npm install and got Could not resolve dependency (for ng-web-apis , maskito , ng-polymorpheus or ng-event-plugins packages) **Solution:** Taiga UI depends on many other Taiga Family packages . Yarn and NPM with enabled legacy-peer-deps config do not automatically install transitive peer dependencies. It means that you should manage them manually . Explore package.json of every used Taiga UI package. Find their peerDependencies and ensure that they are installed and their versions are compatible with constraints from Taiga libraries. **Problem:** I ran nx migrate --run-migrations and got Cannot find module 'ts-morph' error, but my project uses NPM without legacy-peer-deps **Solution:** Nx issue with ng migrate command. Bump Nx version or just run npm install followed by **Problem:** Migration fails with FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory **Solution:** Migration schematics recursively traverse every file and directory. This operation can be memory-intensive. If you encounter this error, try increasing the memory limit for the Node.js process. **Problem:** I still have some problems with running the basic version of ng update / ng migrate command, I need an approach to execute all schematics manually **Solution:** 1. Manually update all Taiga UI's packages to v{NEXT_MAJOR} (i.e. just change versions inside your package.json by yourself without any console commands and then run npm install ). 2. Check that node_modules/@taiga-ui/cdk/package.json contains the {NEXT_MAJOR}th major version 3. Execute: or ```bash ```bash nx migrate @taiga-ui/cdk --from="@taiga-ui/cdk@x.x.x" nx migrate --run-migrations ``` ``` # components/Accordion - **Package**: `KIT` - **Type**: components - **Version**: 5.0.0 ### Example ```html Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities Basic elements needed to develop components, directives and more using Taiga UI design system ``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [closeOthers] | `boolean` | close other sections when user opens one | | [size] | `TuiSizeS \| TuiSizeL` | — | | [(tuiAccordion)] | `boolean` | individual item open state | ### Usage Examples #### Basic Default use case for an accordion with exclusive expanded item. **Template:** ```html @for (item of data | keyvalue; track item) { {{ item.value }} } ``` **TypeScript:** ```ts import {KeyValuePipe} from '@angular/common'; import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAccordion} from '@taiga-ui/kit'; @Component({ imports: [KeyValuePipe, TuiAccordion], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example { protected readonly data = { 'Taiga UI cdk': 'Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities', 'Taiga UI core': 'Basic elements needed to develop components, directives and more using Taiga UI design system', 'Taiga UI kit': 'The main set of components used to build Taiga UI based Angular applications', }; } ``` #### Custom Customizing appearance of the accordion with CSS. **Template:** ```html @for (group of operations | keyvalue: orderBy; track group) { @for (operation of group.value; track operation) {
{{ operation.title }} @if (operation.subtitle) { {{ operation.subtitle }} } @if (operation.sum) { {{ operation.sum | tuiAmount: '$' : 'start' }} {{ operation.time }} } @else { }
} } ``` **TypeScript:** ```ts import {KeyValuePipe} from '@angular/common'; import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAmountPipe} from '@taiga-ui/addon-commerce'; import {TuiButton, TuiCell, TuiTitle} from '@taiga-ui/core'; import {TuiAccordion, TuiAvatar} from '@taiga-ui/kit'; interface Operation { title: string; subtitle?: string; sum?: number; time?: string; } @Component({ imports: [ KeyValuePipe, TuiAccordion, TuiAmountPipe, TuiAvatar, TuiButton, TuiCell, TuiTitle, ], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly operations = { Today: [], Yesterday: [ { title: 'Cashback', subtitle: 'Pot of gold', sum: 237, time: '19:32', }, {title: 'Failed to load'}, ], 'January 6, 2021': [ { title: 'Salary', subtitle: 'Account number ••••237', sum: 43256, time: '11:02', }, { title: 'Shaman Hat', subtitle: 'Insurrection Apparel', sum: -99, time: '09:11', }, { title: 'Shaman Makeup', subtitle: 'Insurrection Apparel', sum: -75, time: '09:11', }, ], }; protected getIcon(operation: Operation): string { if (!operation.sum) { return '@tui.triangle-alert'; } return operation.sum > 0 ? '@tui.thumbs-up' : '@tui.thumbs-down'; } protected sum(operations: readonly Operation[]): number { return operations.reduce((acc, {sum}) => acc + (sum || 0), 0); } protected orderBy(): number { return 0; } } ``` **LESS:** ```less .accordion { inline-size: 20rem; border-radius: 0; [tuiAccordion] { border-block-start: 1px solid var(--tui-border-normal); background: transparent !important; mask-image: none; } tui-expand, [tuiCell] { padding-inline-start: 0; padding-inline-end: 0; box-shadow: none; } } ``` #### Single Using accordion with a single item akin to `details` + `summary` tags. **Template:** ```html Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAccordion} from '@taiga-ui/kit'; @Component({ imports: [TuiAccordion], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example {} ``` #### Eager and Lazy Choosing between eagerly instantiated and lazy instantiated content. **Template:** ```html I'm lazy content I'm eager content ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAccordion} from '@taiga-ui/kit'; @Component({ imports: [TuiAccordion], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example {} ``` #### Nested Showing multiple nested accordion blocks. **Template:** ```html Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities The main set of components used to build Taiga UI based Angular applications Basic elements needed to develop components, directives and more using Taiga UI design system ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAccordion} from '@taiga-ui/kit'; @Component({ imports: [TuiAccordion], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example {} ``` #### Connected Using `Connected` directive to implement stepper-like UI. **Template:** ```html @for (item of steps | keyvalue: orderBy; track item) { {{ item.value.text }} @for (step of item.value.steps; track step) { } } ``` **TypeScript:** ```ts import {KeyValuePipe} from '@angular/common'; import {Component} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {tuiArrayToggle} from '@taiga-ui/cdk'; import {TuiCell, TuiCheckbox, TuiTitle} from '@taiga-ui/core'; import {TuiAccordion, TuiAvatar, TuiConnected} from '@taiga-ui/kit'; @Component({ imports: [ FormsModule, KeyValuePipe, TuiAccordion, TuiAvatar, TuiCell, TuiCheckbox, TuiConnected, TuiTitle, ], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly steps = { 'First steps': { text: 'Getting to know your workplace', steps: ['Looks around', 'Talk to colleagues', 'Have lunch'], }, 'Work day': { text: 'Start working', steps: ['Open the project', 'Read the documentation', 'Start coding'], }, Mastery: { text: 'Become a pro', steps: ['Write tests', 'Refactor the code', 'Deploy the project'], }, }; protected selected = this.steps['First steps'].steps.concat( this.steps['Work day'].steps[0] || '', ); protected isChecked(steps: readonly string[]): boolean { return steps.every((step) => this.selected.includes(step)); } protected toggle(step: string): void { this.selected = tuiArrayToggle(this.selected, step); } protected orderBy(): number { return 0; } } ``` **LESS:** ```less .accordion { inline-size: 20rem; color: var(--tui-text-secondary); [tuiAccordion] { font: var(--tui-typography-heading-h6); padding: 0; } tui-expand { box-shadow: none; padding: 0; } [tuiCell] { margin-inline-start: -1rem; } } ``` #### With Action Button Adding action buttons to accordion header. **Template:** ```html @for (item of items; track item.title) {
{{ item.content }} } ``` **TypeScript:** ```ts import {Component, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton, TuiDialogService} from '@taiga-ui/core'; import {TuiAccordion} from '@taiga-ui/kit'; interface Item { readonly title: string; readonly content: string; readonly details: string; } @Component({ imports: [TuiAccordion, TuiButton], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { private readonly dialogs = inject(TuiDialogService); protected readonly items: readonly Item[] = [ { title: 'Taiga UI cdk', content: 'Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities', details: 'Framework-agnostic utilities: directives, pipes, observables and DI tokens shared across all Taiga UI packages.', }, { title: 'Taiga UI core', content: 'Basic elements needed to develop components, directives and more using Taiga UI design system', details: 'Design tokens, theming and the foundational building blocks every other Taiga UI package relies on.', }, { title: 'Taiga UI kit', content: 'The main set of components used to build Taiga UI based Angular applications', details: 'Ready-to-use high level components: accordion, calendar, input masks and much more.', }, ]; protected showDetails(item: Item): void { this.dialogs.open(item.details, {label: item.title, size: 's'}).subscribe(); } } ``` **LESS:** ```less tui-accordion { .t-header { display: flex; align-items: stretch; > [tuiAccordion] { flex: 1; justify-content: flex-start; text-align: start; &::after { margin-inline-start: auto; } } } tui-expand { box-shadow: none; } } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core'; import {TuiAccordion} from '@taiga-ui/kit'; @Component({ imports: [TuiAccordion, TuiDemo], templateUrl: './index.html', changeDetection, }) export default class Page { protected readonly sizeVariants: ReadonlyArray = ['s', 'm', 'l']; protected size = this.sizeVariants[2]!; protected closeOthers = true; protected open = false; } ``` --- # components/ActionBar - **Package**: `KIT` - **Type**: components - **Version**: 5.0.0 It is an element on the bottom of screen to show actions by multiselect of some items. It works with custom content. ### Usage Examples #### Size M **Template:** ```html
@for (_ of '-'.repeat(5); track $index) { }
Selected: {{ selected }} of {{ items.length }} @if (!isMobile()) { }
@for (_ of '-'.repeat(5); track $index) { } @for (_ of '-'.repeat(5); track $index) { @if ($index > lastIndex) { } } @if (!isMobile()) { } @if (!isMobile()) { } @if (isMobile()) { } @if (isMobile()) { } @if (!isMobile()) { } ``` **TypeScript:** ```ts import {Component, computed, inject} from '@angular/core'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import { TUI_BREAKPOINT, TuiButton, TuiDataList, TuiDropdown, TuiIcon, TuiLink, TuiPopup, } from '@taiga-ui/core'; import {TuiActionBar, TuiFilter, TuiItemsWithMore} from '@taiga-ui/kit'; @Component({ imports: [ ReactiveFormsModule, TuiActionBar, TuiButton, TuiDataList, TuiDropdown, TuiFilter, TuiIcon, TuiItemsWithMore, TuiLink, TuiPopup, ], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example { private readonly breakpoint = inject(TUI_BREAKPOINT); protected items = ['one', 'two', 'three', 'four']; protected control = new FormControl([]); protected expanded = false; protected readonly isMobile = computed(() => this.breakpoint() === 'mobile'); protected get value(): string[] { return this.control.value || []; } protected get open(): boolean { return this.value.length > 0; } protected get selected(): number { return this.value.length; } protected toggleSelect(): void { this.control.setValue(this.selected < this.items.length ? this.items : []); } protected close(): void { this.control.setValue([]); this.expanded = false; } } ``` #### Size S **Template:** ```html Action bar opened ``` **TypeScript:** ```ts import {Component, computed, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TUI_BREAKPOINT, TuiButton, TuiPopup} from '@taiga-ui/core'; import {TuiActionBar} from '@taiga-ui/kit'; @Component({ imports: [TuiActionBar, TuiButton, TuiPopup], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example { private readonly breakpoint = inject(TUI_BREAKPOINT); protected open = false; protected readonly isMobile = computed(() => this.breakpoint() === 'mobile'); } ``` #### Top position **Template:** ```html Action bar on top opened ``` **TypeScript:** ```ts import {Component, signal} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton, TuiPopup} from '@taiga-ui/core'; import {TuiActionBar} from '@taiga-ui/kit'; @Component({ imports: [TuiActionBar, TuiButton, TuiPopup], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly open = signal(false); } ``` **LESS:** ```less tui-action-bar { inset-block-start: ~'max(1rem, env(safe-area-inset-top))'; inset-block-end: unset; } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; @Component({ imports: [TuiDemo], templateUrl: './index.html', styleUrl: './index.less', changeDetection, }) export default class Page { protected readonly examples = ['Size M', 'Size S', 'Top position']; } ``` ### LESS ```less .label { inline-size: 6.25rem; } ``` --- # components/AppBar - **Package**: `LAYOUT` - **Type**: components - **Version**: 5.0.0 Component for the main app header ### Usage Examples #### Mobile — medium size **Template:** ```html

iOS

Taiga UI Taiga UI — Components library Taiga UI

Android

Taiga UI Taiga UI — Components library Taiga UI
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiPlatform} from '@taiga-ui/cdk'; import {TuiButton, TuiTitle} from '@taiga-ui/core'; import {TuiProgressBar} from '@taiga-ui/kit'; import {TuiAppBar} from '@taiga-ui/layout'; @Component({ imports: [TuiAppBar, TuiButton, TuiPlatform, TuiProgressBar, TuiTitle], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less tui-app-bar { box-shadow: var(--tui-shadow-small); inline-size: 20rem; margin-block-end: 1rem; } ``` #### Desktop — large size **Template:** ```html Taiga UI ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton, TuiTitle} from '@taiga-ui/core'; import {TuiProgress} from '@taiga-ui/kit'; import {TuiAppBar} from '@taiga-ui/layout'; @Component({ imports: [TuiAppBar, TuiButton, TuiProgress, TuiTitle], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less tui-app-bar { box-shadow: var(--tui-shadow-small); inline-size: 30rem; margin-block-end: 1rem; } ``` #### Variants **Template:** ```html

Customization

Taiga UI

Centered Android

``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiPlatform} from '@taiga-ui/cdk'; import {TuiButton, TuiTitle} from '@taiga-ui/core'; import {TuiFade, TuiProgress} from '@taiga-ui/kit'; import {TuiAppBar} from '@taiga-ui/layout'; @Component({ imports: [TuiAppBar, TuiButton, TuiFade, TuiPlatform, TuiProgress, TuiTitle], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less @import '@taiga-ui/styles/utils'; tui-app-bar { box-shadow: var(--tui-shadow-small); inline-size: 20rem; margin-block-end: 1rem; } .gray { box-shadow: none; background: var(--tui-background-base-alt); button { color: var(--tui-text-primary); } } .black { color: var(--tui-background-base); background: var(--tui-text-primary); button { color: var(--tui-status-warning); } } section tui-app-bar [tuiTitle] { .center-all(); text-align: center; } ``` #### Dialog **Template:** ```html

I'm a stepper

Step {{ step }}

``` **TypeScript:** ```ts import {Component, inject, type TemplateRef} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton, TuiDialogService, TuiTitle} from '@taiga-ui/core'; import {TuiProgress} from '@taiga-ui/kit'; import {TuiAppBar, TuiCardLarge, TuiHeader} from '@taiga-ui/layout'; @Component({ imports: [TuiAppBar, TuiButton, TuiCardLarge, TuiHeader, TuiProgress, TuiTitle], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example { private readonly dialogs = inject(TuiDialogService); protected step = 0; protected open(template: TemplateRef): void { this.step = 0; this.dialogs .open(template, { appearance: 'fullscreen', closable: false, dismissible: false, }) .subscribe(); } } ``` #### Dynamic header **Template:** ```html
Title 1
Subtitle
@for (_ of '-'.repeat(7); track $index) {
Title
Description
}
Title 2
@for (_ of '-'.repeat(15); track $index) {
Title
Description
}
Title 3 Long title
@for (_ of '-'.repeat(15); track $index) {
Title
Description
}
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiPlatform} from '@taiga-ui/cdk'; import {TuiCell, TuiTitle} from '@taiga-ui/core'; import {TuiAvatar, TuiSegmented} from '@taiga-ui/kit'; import {TuiAppBar, TuiDynamicHeader, TuiHeader} from '@taiga-ui/layout'; @Component({ imports: [ TuiAppBar, TuiAvatar, TuiCell, TuiDynamicHeader, TuiHeader, TuiPlatform, TuiSegmented, TuiTitle, ], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected activeItemIndex = 0; } ``` **LESS:** ```less .container { max-block-size: 30rem; inline-size: 20rem; overflow: scroll; overscroll-behavior: none; } tui-app-bar { position: sticky; z-index: 1; inset-block-start: -1px; background: var(--tui-background-base); } tui-segmented { inline-size: 6rem; inline-size: fit-content; margin-block-end: 1rem; } .content > [tuiHeader] { padding: 0 1rem; } ``` #### iOS Liquid glass **Template:** ```html
Taiga UI Taiga UI — Components library Taiga UI dev Taiga
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiPlatform} from '@taiga-ui/cdk'; import {TUI_LIQUID_GLASS, TuiButton, TuiTitle} from '@taiga-ui/core'; import {TuiProgressBar} from '@taiga-ui/kit'; import {TuiAppBar} from '@taiga-ui/layout'; @Component({ imports: [TuiAppBar, TuiButton, TuiPlatform, TuiProgressBar, TuiTitle], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, providers: [{provide: TUI_LIQUID_GLASS, useValue: true}], }) export default class Example {} ``` **LESS:** ```less tui-app-bar { inline-size: 20rem; margin-block-end: 1rem; } section { padding: 1rem; margin: -1rem; overflow: hidden; } ``` #### Liquid glass dynamic header **Template:** ```html
Title 1
Subtitle
@for (_ of '-'.repeat(7); track $index) {
Title
Description
}
Title 2
@for (_ of '-'.repeat(15); track $index) {
Title
Description
}
Title 3 Long title
@for (_ of '-'.repeat(15); track $index) {
Title
Description
}
``` **TypeScript:** ```ts import {Component, signal} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {WaIntersectionObserver} from '@ng-web-apis/intersection-observer'; import {TuiPlatform} from '@taiga-ui/cdk'; import {TUI_LIQUID_GLASS, TuiCell, TuiTitle} from '@taiga-ui/core'; import {TuiAvatar} from '@taiga-ui/kit'; import {TuiAppBar, TuiDynamicHeader, TuiHeader} from '@taiga-ui/layout'; @Component({ imports: [ TuiAppBar, TuiAvatar, TuiCell, TuiDynamicHeader, TuiHeader, TuiPlatform, TuiTitle, WaIntersectionObserver, ], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, providers: [{provide: TUI_LIQUID_GLASS, useValue: true}], }) export default class Example { protected readonly blur = signal(false); } ``` **LESS:** ```less .container { max-block-size: 30rem; inline-size: 20rem; overflow: scroll; overscroll-behavior: none; } tui-app-bar { position: sticky; z-index: 1; inset-block-start: 0; margin-block-end: 0.75rem; } ``` #### Color background **Template:** ```html
Backgrounds
@for (item of colors; track item) {

{{ item }}

}
``` **TypeScript:** ```ts import {Component, inject, signal} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {WaIntersectionObserver} from '@ng-web-apis/intersection-observer'; import {TuiPlatform} from '@taiga-ui/cdk'; import {TUI_DARK_MODE, TUI_LIQUID_GLASS, TuiTitle} from '@taiga-ui/core'; import {TuiAppBar, TuiDynamicHeader, TuiHeader} from '@taiga-ui/layout'; @Component({ imports: [ TuiAppBar, TuiDynamicHeader, TuiHeader, TuiPlatform, TuiTitle, WaIntersectionObserver, ], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, providers: [{provide: TUI_LIQUID_GLASS, useValue: signal(true)}], }) export default class Example { protected readonly mode = inject(TUI_DARK_MODE); protected readonly colors = ['#2f3f5b', '#3a3f66', '#5a2f3f', '#3f4e37', '#5a3851']; protected readonly color = signal(''); protected readonly blur = signal(false); protected onIntersection(isIntersecting: boolean, color: string): void { if (isIntersecting) { this.color.set(color); } else if (this.color() === color) { this.color.set(''); } } } ``` **LESS:** ```less .container { max-block-size: 30rem; inline-size: 20rem; overflow: scroll; overscroll-behavior: none; } tui-app-bar { position: sticky; z-index: 1; inset-block-start: 0; margin-block-end: 0.75rem; } .content { padding: 0; > [tuiHeader] { padding: 1rem; } } .block { block-size: 20rem; } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; @Component({ imports: [TuiDemo], templateUrl: './index.html', changeDetection, }) export default class Page { protected readonly examples = [ 'Mobile — medium size', 'Desktop — large size', 'Variants', 'Dialog', 'Dynamic header', 'iOS Liquid glass', 'Liquid glass dynamic header', 'Color background', ]; } ``` --- # components/ArcChart - **Package**: `ADDON-CHARTS` - **Type**: components - **Version**: 5.0.0 ### Example ```html ``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [max] | `number` | maximum value | | [maxLabel] | `string` | label for maximum value | | [minLabel] | `string` | label for minimum value | | [size] | `TuiSizeXL` | — | | [value] | `readonly number[]` | value array | | [(activeItemIndex)] | `number` | index of selected arc | ### Usage Examples #### Sizes **Template:** ```html
Total value Total value
Label
 {{ 123456 | tuiAmount: 'RUB' }}
Not bad!
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiArcChart} from '@taiga-ui/addon-charts'; import {TuiAmountPipe} from '@taiga-ui/addon-commerce'; import {TuiNumberFormat, TuiTextfield} from '@taiga-ui/core'; import {TuiInputNumber} from '@taiga-ui/kit'; @Component({ imports: [ FormsModule, TuiAmountPipe, TuiArcChart, TuiInputNumber, TuiNumberFormat, TuiTextfield, ], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly value = [40, 30, 20, 10]; protected activeItemIndex = Number.NaN; public onTextfieldChange(value: number | null): void { this.activeItemIndex = value ?? Number.NaN; } } ``` **LESS:** ```less .wrapper { display: flex; align-items: center; margin-block-start: 1rem; --tui-chart-categorical-00: var(--tui-chart-categorical-12); --tui-chart-categorical-01: var(--tui-chart-categorical-01); --tui-chart-categorical-02: var(--tui-chart-categorical-03); --tui-chart-categorical-03: var(--tui-chart-categorical-09); } .index-controller { max-inline-size: 20rem; } ``` #### Stacked **Template:** ```html
+20%
For filling in last name
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiArcChart} from '@taiga-ui/addon-charts'; import {tuiSum} from '@taiga-ui/cdk'; @Component({ imports: [TuiArcChart], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly value = [13769, 12367, 10172, 3018, 2592]; protected readonly sum = tuiSum(...this.value); } ``` **LESS:** ```less @import '@taiga-ui/styles/utils'; .wrapper { position: relative; --tui-chart-0: var(--tui-chart-categorical-03); } .stacked { .fullsize(); --tui-background-neutral-1: transparent; --tui-chart-0: var(--tui-chart-categorical-04); } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import {TuiArcChart} from '@taiga-ui/addon-charts'; import {type TuiSizeXL} from '@taiga-ui/core'; @Component({ imports: [TuiArcChart, TuiDemo], templateUrl: './index.html', styleUrl: './index.less', changeDetection, }) export default class Page { protected readonly examples = ['Sizes', 'Stacked']; protected readonly valueVariants = [ [42], [40, 30, 20, 10], [13769, 10172, 3018, 2592], ]; protected value = this.valueVariants[0]!; protected readonly maxVariants = [100, 10000, 50000]; protected max = this.maxVariants[0]!; protected readonly sizeVariants: readonly TuiSizeXL[] = ['m', 'l', 'xl']; protected size = this.sizeVariants[0]!; protected minLabel = '0%'; protected maxLabel = '100%'; protected activeItemIndex = Number.NaN; } ``` ### LESS ```less .chart { margin: 0 auto; } ``` --- # components/Avatar - **Package**: `KIT` - **Type**: components - **Version**: 5.0.0 ### Example ```html
``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [tuiAvatar] | `string` | | | [badge] | `string` | color of the dot badge indicator | | [round] | `boolean` | circle shape | | [size] | `TuiSizeS \| TuiSizeL` | — | ### Usage Examples #### Content types **Template:** ```html

Icons and initials

Image, video and content

Alex Inkin
99+

Fallback to initials or icon

Alex Inkin
Alex Inkin
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiCell} from '@taiga-ui/core'; import {TuiAvatar} from '@taiga-ui/kit'; @Component({ imports: [TuiAvatar, TuiCell], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example {} ``` #### Colors **Template:** ```html
Fading
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAutoColorPipe, TuiAvatar, TuiFade} from '@taiga-ui/kit'; @Component({ imports: [TuiAutoColorPipe, TuiAvatar, TuiFade], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: flex; gap: 1rem; } .text { background: var(--tui-background-accent-opposite-pressed); color: var(--tui-background-base); } ``` #### Sizes **Template:** ```html @for (size of sizes; track size) {
{{ size | uppercase }}
} ``` **TypeScript:** ```ts import {UpperCasePipe} from '@angular/common'; import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAvatar} from '@taiga-ui/kit'; @Component({ imports: [TuiAvatar, UpperCasePipe], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly sizes = ['xxl', 'xl', 'l', 'm', 's', 'xs'] as const; protected readonly names = ['Jason Statham', 'Silvester Stallone', 'Jackie Chan']; } ``` **LESS:** ```less :host { display: flex; flex-direction: column; gap: 1rem; } section { display: flex; gap: 0.5rem; } ``` #### Stacking **Template:** ```html @for (size of sizes; track size; let odd = $odd) { @for (name of names; track name) {
}
99+
} ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {type TuiSizeXS, type TuiSizeXXL} from '@taiga-ui/core'; import { TuiAutoColorPipe, TuiAvatar, TuiAvatarStack, TuiInitialsPipe, } from '@taiga-ui/kit'; @Component({ imports: [TuiAutoColorPipe, TuiAvatar, TuiAvatarStack, TuiInitialsPipe], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example { protected readonly names = ['Jason Statham', 'Silvester Stallone', 'Jackie Chan']; protected readonly sizes: ReadonlyArray = [ 'xxl', 'xl', 'l', 'm', 's', 'xs', ]; } ``` #### Options with DI **Template:** ```html
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAvatar, tuiAvatarOptionsProvider} from '@taiga-ui/kit'; @Component({ imports: [TuiAvatar], templateUrl: './index.html', encapsulation, changeDetection, providers: [ tuiAvatarOptionsProvider({size: 'l', appearance: 'secondary', round: false}), ], }) export default class Example {} ``` #### Labeled **Template:** ```html
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAvatar, TuiAvatarLabeled} from '@taiga-ui/kit'; @Component({ imports: [TuiAvatar, TuiAvatarLabeled], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: flex; gap: 1rem; } [tuiAvatar] { border: 1px solid var(--tui-border-normal); } ``` #### Outline **Template:** ```html
Alex Inkin
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAvatar, TuiAvatarOutline} from '@taiga-ui/kit'; @Component({ imports: [TuiAvatar, TuiAvatarOutline], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: flex; gap: 1rem; } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {TuiDocAppearance} from '@demo/components/appearance'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import {type TuiSizeXS, type TuiSizeXXL} from '@taiga-ui/core'; import {TuiAvatar} from '@taiga-ui/kit'; @Component({ imports: [TuiAvatar, TuiDemo, TuiDocAppearance], templateUrl: './index.html', changeDetection, }) export default class Page { protected readonly examples = [ 'Content types', 'Colors', 'Sizes', 'Stacking', 'Options with DI', 'Labeled', 'Outline', ]; protected readonly sizes: ReadonlyArray = [ 'xs', 's', 'm', 'l', 'xl', 'xxl', ]; protected size = this.sizes[3]!; protected readonly srcVariants: readonly string[] = [ 'MW', '@tui.star', 'https://avatars.githubusercontent.com/u/11832552', 'https://taiga-ui.dev/assets/images/test-not-found.png', ]; protected src = this.srcVariants[0]!; protected readonly badgeVariants: readonly string[] = [ '', 'var(--tui-background-accent-1)', 'var(--tui-text-positive)', '#C86DD7', ]; protected badge = this.badgeVariants[0]!; protected round = true; } ``` --- # components/Axes - **Package**: `ADDON-CHARTS` - **Type**: components - **Version**: 5.0.0 Just axes for charts ### Example ```html ``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [centeredXLabels] | `boolean` | center X axis labels | | [axisXLabels] | `ReadonlyArray` | — no stroke | | [axisYInset] | `boolean` | inset of labels on Y axis | | [axisYLabels] | `readonly string[]` | labels for Y axis | | [axisYName] | `string` | name of Y axis | | [axisYSecondaryInset] | `boolean` | inset labels for Y axis | | [axisYSecondaryLabels] | `readonly string[]` | secondary Y axis labels | | [axisYSecondaryName] | `string` | secondary Y axis name | | [horizontalLines] | `number` | horizontal lines number | | [horizontalLinesHandler] | `TuiLineHandler` | horizontal lines type handler | | [verticalLines] | `number` | number of vertical lines | | [verticalLinesHandle] | `TuiLineHandler` | vertical lines type handler | ### Usage Examples #### Cool one **Template:** ```html ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAxes, type TuiLineHandler} from '@taiga-ui/addon-charts'; @Component({ imports: [TuiAxes], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly axisXLabels = ['Jan 2019', 'Feb', 'Mar', '']; protected readonly axisYLabels = ['', '25%', '50%', '75%', '100%']; protected readonly axisYSecondaryLabels = ['80 k', '100 k', '120 k']; protected readonly verticalLinesHandler: TuiLineHandler = (index, total) => (index && (index === total - 1 ? 'none' : 'dashed')) || 'solid'; } ``` **LESS:** ```less .axes { block-size: 18.75rem; inline-size: 37.5rem; } ``` #### With bars **Template:** ```html @for (item of value; track item) {

{{ getSetName($index) }} {{ (item[setIndex] || 0) * 1000 | tuiAmount: 'RUB' }}

} ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import { TUI_ALWAYS_DASHED, TUI_ALWAYS_NONE, TuiAxes, TuiBarChart, TuiChartHint, } from '@taiga-ui/addon-charts'; import {TuiAmountPipe} from '@taiga-ui/addon-commerce'; import {tuiCeil} from '@taiga-ui/cdk'; @Component({ imports: [TuiAmountPipe, TuiAxes, TuiBarChart, TuiChartHint], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { private readonly setNames = ['cdk', 'core', 'kit', 'charts']; protected readonly value: ReadonlyArray<[number, number, number, number]> = [ [10, 20, 3, 7], [15, 18, 24, 1], [34, 23, 12, 9], [30, 14, 18, 14], ]; protected readonly maxValue = 40; protected readonly axisYSecondaryLabels = [ '', `${getMax(this.value) / 2} k`, `${getMax(this.value)} k`, ]; protected readonly axisXLabels = ['Q1', 'Q2', 'Q3', 'Q4']; protected readonly horizontalLinesHandler = TUI_ALWAYS_DASHED; protected readonly verticalLinesHandler = TUI_ALWAYS_NONE; protected getSetName(index: number): string { return this.setNames[index] ?? ''; } } function getMax(value: ReadonlyArray<[number, number, number, number]>): number { return tuiCeil( value.reduce((max, value) => Math.max(...value, max), 0), -1, ); } ``` **LESS:** ```less :host, .hint { --tui-chart-categorical-00: #c779d0; --tui-chart-categorical-01: #feac5e; --tui-chart-categorical-02: #ff5f6d; --tui-chart-categorical-03: #4bc0c8; } .axes { block-size: 18.75rem; inline-size: 37.5rem; } .chart { block-size: 100%; } .wrapper { position: relative; display: flex; flex: 1; align-items: flex-end; justify-content: center; block-size: 100%; margin-block-end: -0.0625rem; cursor: pointer; &:hover { background-color: rgba(0, 0, 0, 0.05); } } .hint { display: flex; align-items: center; } .dot { border-radius: 100%; inline-size: 0.75rem; block-size: 0.75rem; margin-inline-end: 0.5rem; } .name { margin-inline-end: 0.5rem; } ``` #### With horizontal bars **Template:** ```html
@for (bar of value; track bar) { }
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAxes, TuiBar} from '@taiga-ui/addon-charts'; @Component({ imports: [TuiAxes, TuiBar], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly axisXLabels = ['0', '25', '50', '75', '100']; protected readonly value = [50, 24, 36, 95]; protected readonly largest = 100; protected getHeight(value: number): number { return Math.abs((value * 100) / this.largest); } } ``` **LESS:** ```less .axes { block-size: 18.75rem; inline-size: 37.5rem; } .t-horizontal-bars { display: flex; justify-content: space-between; align-items: flex-end; inline-size: 16.75rem; block-size: 37.5rem; transform-origin: bottom left; transform: rotate(90deg) translate(-16.75rem, 0); } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import { TUI_ALWAYS_DASHED, TUI_ALWAYS_SOLID, TuiAxes, type TuiLineHandler, type TuiLineType, } from '@taiga-ui/addon-charts'; @Component({ imports: [TuiAxes, TuiDemo], templateUrl: './index.html', styleUrl: './index.less', changeDetection, }) export default class Page { protected readonly examples = ['Cool one', 'With bars', 'With horizontal bars']; protected readonly lineVariants: readonly TuiLineType[] = [ 'solid', 'dashed', 'none', 'hidden', ]; protected readonly labelsXVariants: ReadonlyArray> = [ [], ['', '25%', '50%', '100%', ''], ['One', 'Two', 'Three', ''], ['One', null, '', 'Two and a half', 'Three', null, ''], ]; protected readonly labelsYVariants: ReadonlyArray = [ [], ['', '25%', '50%', '100%'], ['One', 'Two', 'Three'], ['One', '', 'Two and a half', 'Three'], ]; protected readonly handlerVariants: readonly TuiLineHandler[] = [ TUI_ALWAYS_SOLID, TUI_ALWAYS_DASHED, (index) => (index % 2 ? 'dashed' : 'solid'), ]; protected centeredXLabels = false; protected axisXLabels = this.labelsXVariants[0]!; protected axisYInset = false; protected axisYLabels = this.labelsYVariants[0]!; protected axisYName = ''; protected axisYSecondaryInset = false; protected axisYSecondaryLabels = this.labelsYVariants[0]!; protected axisYSecondaryName = ''; protected horizontalLines = 1; protected horizontalLinesHandler = this.handlerVariants[0]!; protected verticalLines = 1; protected verticalLinesHandler = this.handlerVariants[1]!; } ``` ### LESS ```less .axes { block-size: 12.5rem; } ``` --- # components/Badge - **Package**: `KIT` - **Type**: components - **Version**: 5.0.0 Component for displaying text, pictures and icons. ### Example ```html

@if (contentType === 'with icon') {

Taiga UI
} @if (contentType === 'text') { Taiga UI } @if (contentType === 'image') { User }

``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [size] | `TuiSizeL` | — | | [appearance] | `string` | — | ### Usage Examples #### Basic **Template:** ```html
Default
Primary
Accent
Success
Error
Warning
Warning
Neutral
Info

Custom status

Custom

Use CSS for support colors

@for (_ of '-'.repeat(20); track $index) {
Taiga
}

Sizes

Success
Success
Success
Success
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBadge, TuiStatus} from '@taiga-ui/kit'; @Component({ imports: [TuiBadge, TuiStatus], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less [tuiBadge] { margin: 0.5rem; } ``` #### Sizes **Template:** ```html
x-large
large
medium
small
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBadge} from '@taiga-ui/kit'; @Component({ imports: [TuiBadge], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: flex; gap: 0.25rem; align-items: center; } ``` #### Content type **Template:** ```html

Value with icon

x-large
large
medium
small

Icon only

Image

User User User User
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiPlatform} from '@taiga-ui/cdk'; import {TuiBadge} from '@taiga-ui/kit'; @Component({ imports: [TuiBadge, TuiPlatform], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: block; min-inline-size: 18rem; } section { display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; margin-block-end: 1rem; } h4 { flex-basis: 100%; margin: 0; } ``` #### Long value **Template:** ```html
Very long value in badge
Very long value in badge
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBadge, TuiFade} from '@taiga-ui/kit'; @Component({ imports: [TuiBadge, TuiFade], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: grid; gap: 1rem; } [tuiBadge] { max-inline-size: 10rem; } .ellipsis { overflow: hidden; text-overflow: ellipsis; } ``` #### Customization **Template:** ```html
10 000 000 $
Taiga
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBadge} from '@taiga-ui/kit'; @Component({ imports: [TuiBadge], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less @import '@taiga-ui/styles/utils.less'; :host { display: flex; gap: 0.75rem; } .custom-1 { .gradient(#0094cf, #24c0ff); box-shadow: var(--tui-shadow-small); } .custom-2 { .gradient(#c86dd7, #3023ae); } ``` #### Options with DI **Template:** ```html
10 000 000 $
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBadge, tuiBadgeOptionsProvider} from '@taiga-ui/kit'; @Component({ imports: [TuiBadge], templateUrl: './index.html', encapsulation, changeDetection, providers: [tuiBadgeOptionsProvider({appearance: 'primary'})], }) export default class Example {} ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import {type TuiSizeS, type TuiSizeXL, TuiTitle} from '@taiga-ui/core'; import {TuiBadge, TuiFade, TuiRadioList} from '@taiga-ui/kit'; @Component({ imports: [FormsModule, TuiBadge, TuiDemo, TuiFade, TuiRadioList, TuiTitle], templateUrl: './index.html', changeDetection, }) export default class Page { protected readonly appearanceVariants = [ '', 'accent', 'primary', 'custom', 'positive', 'negative', 'warning', 'info', 'neutral', ]; protected appearance = this.appearanceVariants[0]!; protected readonly sizeVariants: ReadonlyArray = [ 's', 'm', 'l', 'xl', ]; protected size = this.sizeVariants[1]!; protected contentTypeVariants = ['text', 'with icon', 'image']; protected contentType = this.contentTypeVariants[0]!; protected readonly examples = [ 'Basic', 'Sizes', 'Content type', 'Long value', 'Customization', 'Options with DI', ]; } ``` --- # components/BadgeNotification - **Package**: `KIT` - **Type**: components - **Version**: 5.0.0 Simple non-interactive badge. Used in headers, cells, cards, avatars to indicate notifications, such as new messages ### Example ```html 11 ``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [size] | `TuiSizeL` | — | ### Usage Examples #### Basic **Template:** ```html

Desktop

9 9 9 9

Android

9 9 9 9

IOS

9 9 9 9

``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiPlatform} from '@taiga-ui/cdk'; import {TuiBadgeNotification} from '@taiga-ui/kit'; @Component({ imports: [TuiBadgeNotification, TuiPlatform], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less tui-badge-notification { margin: 0.2rem; } ``` #### Custom color **Template:** ```html 10 11 12 ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBadgeNotification} from '@taiga-ui/kit'; @Component({ imports: [TuiBadgeNotification], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less @import '@taiga-ui/styles/utils.less'; tui-badge-notification { margin: 0.2rem; .gradient(#c86dd7, #3023ae); } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import {TuiLabel, type TuiSizeL, type TuiSizeXS} from '@taiga-ui/core'; import {TuiBadgeNotification} from '@taiga-ui/kit'; @Component({ imports: [TuiBadgeNotification, TuiDemo, TuiLabel], templateUrl: './index.html', changeDetection, }) export default class Example { protected readonly sizeVariants: ReadonlyArray = [ 'l', 'm', 's', 'xs', ]; protected size = this.sizeVariants[0]!; protected readonly examples = ['Basic', 'Custom color']; } ``` --- # components/BadgedContent - **Package**: `KIT` - **Type**: components - **Version**: 5.0.0 BadgedContent is a wrapper for other components to add badges and notifications to them. ### Example ```html 1
``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | style.--t-radius | `string` | border radius | ### Usage Examples #### Basic **Template:** ```html 99
120
99
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAvatar, TuiBadge, TuiBadgedContent, TuiBadgeNotification} from '@taiga-ui/kit'; @Component({ imports: [TuiAvatar, TuiBadge, TuiBadgedContent, TuiBadgeNotification], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: flex; gap: 1rem; } ``` #### Rounded content **Template:** ```html 8
Taiga
99
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAvatar, TuiBadge, TuiBadgedContent, TuiBadgeNotification} from '@taiga-ui/kit'; @Component({ imports: [TuiAvatar, TuiBadge, TuiBadgedContent, TuiBadgeNotification], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: flex; gap: 1rem; } ``` #### With different components **Template:** ```html ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton, TuiInput} from '@taiga-ui/core'; import {TuiBadge, TuiBadgedContent, TuiBadgeNotification} from '@taiga-ui/kit'; @Component({ imports: [TuiBadge, TuiBadgedContent, TuiBadgeNotification, TuiButton, TuiInput], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: flex; gap: 1rem; } tui-textfield { min-inline-size: 10rem; } ``` #### With image **Template:** ```html icon
icon
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAvatar, TuiBadgedContent} from '@taiga-ui/kit'; @Component({ imports: [TuiAvatar, TuiBadgedContent], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: flex; gap: 1rem; } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import {TuiTitle} from '@taiga-ui/core'; import {TuiAvatar, TuiBadgedContent, TuiBadgeNotification} from '@taiga-ui/kit'; @Component({ imports: [TuiAvatar, TuiBadgedContent, TuiBadgeNotification, TuiDemo, TuiTitle], templateUrl: './index.html', changeDetection, }) export default class Example { protected radiusVariants = ['0.75rem', '50%']; protected radius = this.radiusVariants[0]!; protected readonly examples = [ 'Basic', 'Rounded content', 'With different components', 'With image', ]; } ``` --- # components/Bar - **Package**: `ADDON-CHARTS` - **Type**: components - **Version**: 5.0.0 A bar for bar chart ### Example ```html ``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [size] | `TuiSizeS \| TuiSizeL` | — | | [value] | `readonly number[]` | an array of segments | ### Usage Examples #### Basic **Template:** ```html ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBar} from '@taiga-ui/addon-charts'; @Component({ imports: [TuiBar], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less .bar { block-size: 6.25rem; background: var(--tui-background-accent-1); } ``` #### Segments **Template:** ```html ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBar} from '@taiga-ui/addon-charts'; @Component({ imports: [TuiBar], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly value = [30, 15, 10]; } ``` **LESS:** ```less .bar { block-size: 6.25rem; --tui-chart-categorical-00: #ffd700; --tui-chart-categorical-01: #87ceeb; --tui-chart-categorical-02: #ffc0cb; } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import {TuiBar} from '@taiga-ui/addon-charts'; import {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core'; @Component({ imports: [TuiBar, TuiDemo], templateUrl: './index.html', styleUrl: './index.less', changeDetection, }) export default class Page { protected readonly examples = ['Basic', 'Segments']; protected readonly sizeVariants: ReadonlyArray = ['s', 'm', 'l']; protected size = this.sizeVariants[1]!; protected readonly valueVariants = [ [30, 20, 10], [237, 50, 10, 5, 1], ]; protected value = this.valueVariants[0]!; } ``` ### LESS ```less .bar { block-size: 6.25rem; } ``` --- # components/BarChart - **Package**: `ADDON-CHARTS` - **Type**: components - **Version**: 5.0.0 Bar chart that can be used as a content to axes . ### Example ```html ``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [collapsed] | `boolean` | shows data set in a single bar | | [max] | `number` | sets chart max manually | | [size] | `TuiSizeS \| TuiSizeL \| null` | for autosize) | | [value] | `ReadonlyArray` | array of segments | | [tuiHintContent] | `PolymorpheusContent>` | content of the hint bubble | ### API - Outputs | Event | Type | Description | |-------|------|-------------| | (tapColumn) | `number` | bar column click/enter event | ### Usage Examples #### Example 1 **Template:** ```html ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAxes, TuiBarChart} from '@taiga-ui/addon-charts'; import {tuiCeil} from '@taiga-ui/cdk'; @Component({ imports: [TuiAxes, TuiBarChart], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly value = [ [3660, 8281, 1069, 9034, 5797, 6918, 8495, 3234, 6204, 1392, 2088, 8637, 8779], [3952, 3671, 3781, 5323, 3537, 4107, 2962, 3320, 8632, 4755, 9130, 1195, 3574], ]; protected readonly labelsX = ['Jan 2019', 'Feb', 'Mar', '']; protected readonly labelsY = ['0', '10 000']; protected getHeight(max: number): number { return (max / tuiCeil(max, -3)) * 100; } } ``` **LESS:** ```less .axes { block-size: 18.75rem; inline-size: 37.5rem; } ``` #### Example 2 **Template:** ```html
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAxes, TuiBarChart, TuiChartHint} from '@taiga-ui/addon-charts'; import {type TuiContext} from '@taiga-ui/cdk'; import {TuiTextfield} from '@taiga-ui/core'; import {TuiChevron, TuiDataListWrapper, tuiFormatNumber, TuiSelect} from '@taiga-ui/kit'; @Component({ imports: [ FormsModule, TuiAxes, TuiBarChart, TuiChartHint, TuiChevron, TuiDataListWrapper, TuiSelect, TuiTextfield, ], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly value = [ [1000, 8000, 4000, 3000, 4000], [6000, 2000, 4500, 7000, 5000], ]; protected readonly labelsX = ['Jan 2021', 'Feb', 'Mar', '']; protected readonly labelsY = ['0', '10 000']; protected readonly appearances = ['floating', 'accent']; protected appearance = this.appearances[0]!; protected readonly hint = ({$implicit}: TuiContext): string => this.value .reduce( (result, set) => `${result}$${tuiFormatNumber(set[$implicit] ?? 0)}\n`, '', ) .trim(); } ``` **LESS:** ```less .axes { block-size: 18.75rem; inline-size: 37.5rem; &:first-child { --tui-chart-categorical-00: #ffd700; --tui-chart-categorical-01: #800080; } &:last-child { --tui-chart-categorical-00: #87ceeb; --tui-chart-categorical-01: #ee82ee; } } .flex { display: flex; min-inline-size: 31.25rem; } .select { max-inline-size: 20rem; } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {TuiDocHint} from '@demo/components/hint'; import {changeDetection} from '@demo/emulate/change-detection'; import {DemoRoute} from '@demo/routes'; import {TuiDemo} from '@demo/utils'; import {TuiBarChart, TuiChartHint} from '@taiga-ui/addon-charts'; import {type TuiContext, type TuiStringHandler} from '@taiga-ui/cdk'; import {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core'; @Component({ imports: [TuiBarChart, TuiChartHint, TuiDemo, TuiDocHint], templateUrl: './index.html', styleUrl: './index.less', changeDetection, }) export default class Page { public readonly examples = ['With axes', 'Same values with collapsed mode']; protected collapsed = false; protected readonly sizeVariants: ReadonlyArray = ['s', 'm', 'l']; protected size: TuiSizeL | TuiSizeS | null = null; protected max = 0; protected readonly valueVariants = [ [ [30000, 20500, 12345], [12422, 16124, 22424], ], [ [30, 65, 30, 80, 54], [98, 48, 33, 25, 11], [55, 10, 27, 36, 73], ], ]; protected value = this.valueVariants[0]!; protected readonly hintContentVariants: ReadonlyArray< TuiStringHandler> > = [({$implicit}) => this.value.map((set) => set[$implicit] ?? 0).join('\n')]; protected hintContent: TuiStringHandler> | null = null; protected readonly routes = DemoRoute; } ``` ### LESS ```less .chart { block-size: 12.5rem; } ``` --- # components/BarSet - **Package**: `ADDON-CHARTS` - **Type**: components - **Version**: 5.0.0 A group of bars for bar chart ### Example ```html ``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [collapsed] | `boolean` | shows data set in a single bar | | [size] | `TuiSizeS \| TuiSizeL \| null` | for autosize) | | [value] | `readonly number[]` | array of segments | ### Usage Examples #### Dynamic size **Template:** ```html ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBarSet} from '@taiga-ui/addon-charts'; @Component({ imports: [TuiBarSet], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly value = [30, 15, 10]; } ``` **LESS:** ```less .bars { block-size: 6.25rem; inline-size: 10rem; box-shadow: 0 1px var(--tui-border-normal); } ``` #### Fixed size **Template:** ```html ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBarSet} from '@taiga-ui/addon-charts'; @Component({ imports: [TuiBarSet], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly value = [30, 15, 10]; } ``` **LESS:** ```less .bars { block-size: 6.25rem; inline-size: 10rem; box-shadow: 0 1px var(--tui-border-normal); } ``` #### With negative values **Template:** ```html ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBarSet} from '@taiga-ui/addon-charts'; @Component({ imports: [TuiBarSet], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly value = [30, -15]; } ``` **LESS:** ```less .bars { block-size: 6.25rem; inline-size: 3.75rem; background: linear-gradient(var(--tui-border-normal) 0 0) 0 66.6667% / 100% 1px no-repeat; --tui-chart-categorical-00: var(--tui-background-accent-1); --tui-chart-categorical-01: var(--tui-background-accent-1); } ``` #### Horizontal **Template:** ```html
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBarSet} from '@taiga-ui/addon-charts'; @Component({ imports: [TuiBarSet], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly value = [30, 45, 12, 6, 20]; } ``` **LESS:** ```less .wrapper { block-size: 6.25rem; } .bars { block-size: 12.5rem; inline-size: 6.25rem; margin-block-end: 3.125rem; box-shadow: 0 1px var(--tui-border-normal); transform-origin: bottom left; transform: rotate(90deg) translate(-12.5rem, 0); --tui-chart-categorical-00: linear-gradient(#ffc500, #c21500); --tui-chart-categorical-01: linear-gradient(#26a0da, #314755); --tui-chart-categorical-02: linear-gradient(#f64f59, #c471ed, #12c2e9); --tui-chart-categorical-03: linear-gradient(#c94b4b, #4b134f); --tui-chart-categorical-04: linear-gradient(#114357, #f29492); } ``` #### With value label **Template:** ```html {{ sum | tuiFormatNumber }} ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBarSet} from '@taiga-ui/addon-charts'; import {TuiFormatNumberPipe} from '@taiga-ui/kit'; @Component({ imports: [TuiBarSet, TuiFormatNumberPipe], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly value = [451, 302, 203, 124, 65]; protected readonly sum = this.value.reduce((a, b) => a + b, 0); } ``` **LESS:** ```less .bars { block-size: 7.5rem; inline-size: 5rem; margin-block-start: 2rem; box-shadow: 0 1px var(--tui-border-normal); } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import {TuiBarSet} from '@taiga-ui/addon-charts'; import {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core'; @Component({ imports: [TuiBarSet, TuiDemo], templateUrl: './index.html', styleUrl: './index.less', changeDetection, }) export default class Page { protected readonly examples = [ 'Dynamic size', 'Fixed size', 'With negative values', 'Horizontal', 'With value label', ]; protected collapsed = false; protected readonly sizeVariants: ReadonlyArray = ['s', 'm', 'l']; protected size: TuiSizeL | TuiSizeS | null = null; protected readonly valueVariants = [ [30, 20, 10], [237, -50, 10, 5, 1], ]; protected value = this.valueVariants[0]!; } ``` ### LESS ```less .bars { block-size: 10rem; inline-size: 6.25rem; box-shadow: 0 1px var(--tui-border-normal); } ``` --- # components/Block - **Package**: `KIT` - **Type**: components - **Version**: 5.0.0 `Block` is a special presentation of a checkbox/radiobutton which can display actual control or be a control itself ### Example ```html ``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [tuiBlock] | `TuiSizeL \| TuiSizeS` | — | ### Usage Examples #### Sizes **Template:** ```html
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiCheckbox, TuiIcon, TuiRadio, TuiTitle} from '@taiga-ui/core'; import {TuiBlock, TuiTooltip} from '@taiga-ui/kit'; @Component({ imports: [ ReactiveFormsModule, TuiBlock, TuiCheckbox, TuiIcon, TuiRadio, TuiTitle, TuiTooltip, ], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly form = new FormGroup({ testValue1: new FormControl(true), testValue2: new FormControl({value: false, disabled: true}), testValue3: new FormControl({value: true, disabled: true}), testValue4: new FormControl(false), testValue5: new FormControl(), }); } ``` **LESS:** ```less form { display: flex; inline-size: max-content; align-items: flex-start; gap: 1rem; margin-block-end: 1rem; } ``` #### Groups **Template:** ```html

Horizontal group

Vertical group

Without checkbox indicators

``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiGroup, TuiRadio} from '@taiga-ui/core'; import {TuiBlock, TuiFade} from '@taiga-ui/kit'; @Component({ imports: [ReactiveFormsModule, TuiBlock, TuiFade, TuiGroup, TuiRadio], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly form = new FormGroup({value: new FormControl('orange')}); } ``` **LESS:** ```less @import '@taiga-ui/styles/utils'; .group { max-inline-size: 33rem; margin-block-end: 1.5rem; } .title { font: var(--tui-typography-heading-h5); margin: 0 0 1rem; } ``` #### Custom **Template:** ```html
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiCheckbox, TuiIcon, TuiTitle} from '@taiga-ui/core'; import {TuiAvatar, TuiBlock, TuiSwitch, TuiTooltip} from '@taiga-ui/kit'; @Component({ imports: [ ReactiveFormsModule, TuiAvatar, TuiBlock, TuiCheckbox, TuiIcon, TuiSwitch, TuiTitle, TuiTooltip, ], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly form = new FormGroup({ testValue1: new FormControl(false), testValue2: new FormControl(false), testValue3: new FormControl(false), testValue4: new FormControl(false), }); } ``` **LESS:** ```less @import '@taiga-ui/styles/utils'; form { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {TuiDocAppearance} from '@demo/components/appearance'; import {TuiDocIcons} from '@demo/components/icons'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import {type TuiSizeL, type TuiSizeS, TuiTitle} from '@taiga-ui/core'; import {TuiBlock, TuiSwitch} from '@taiga-ui/kit'; @Component({ imports: [ FormsModule, TuiBlock, TuiDemo, TuiDocAppearance, TuiDocIcons, TuiSwitch, TuiTitle, ], templateUrl: './index.html', changeDetection, }) export default class Example { protected readonly examples = ['Sizes', 'Groups', 'Custom']; protected readonly sizes: ReadonlyArray = ['s', 'm', 'l']; protected readonly appearances = ['outline-grayscale', 'secondary']; protected value = false; protected size = this.sizes[2]!; } ``` --- # components/BlockDetails - **Package**: `LAYOUT` - **Type**: components - **Version**: 5.0.0 Layout directive for describing details. For example, transaction details ### Usage Examples #### Example 1 **Template:** ```html

John W
money transfers

{{ -1050 | tuiAmount: 'USD' }} today extra subtitle Birthday gift
private
fast
Pending
``` **TypeScript:** ```ts import {Component, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {WA_IS_MOBILE} from '@ng-web-apis/platform'; import {TuiAmountPipe} from '@taiga-ui/addon-commerce'; import {TuiIcon, TuiTitle} from '@taiga-ui/core'; import {TuiAvatar, TuiBadge, TuiComment} from '@taiga-ui/kit'; import {TuiBlockDetails} from '@taiga-ui/layout'; @Component({ imports: [ TuiAmountPipe, TuiAvatar, TuiBadge, TuiBlockDetails, TuiComment, TuiIcon, TuiTitle, ], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example { protected readonly isMobile = inject(WA_IS_MOBILE); } ``` #### Example 2 **Template:** ```html

Auchan
grocery • MMC 5350

{{ 0.5 | tuiAmount: 'USD' }} promotion (long value with fade)
cashback

Uber
taxi • MMC 5550

{{ -10.5 | tuiAmount: 'USD' }}
``` **TypeScript:** ```ts import {Component, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {WA_IS_MOBILE} from '@ng-web-apis/platform'; import {tuiAmountOptionsProvider, TuiAmountPipe} from '@taiga-ui/addon-commerce'; import {TuiTitle} from '@taiga-ui/core'; import {TuiAvatar, TuiBadge, TuiFade} from '@taiga-ui/kit'; import {TuiBlockDetails} from '@taiga-ui/layout'; @Component({ imports: [TuiAmountPipe, TuiAvatar, TuiBadge, TuiBlockDetails, TuiFade, TuiTitle], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, providers: [tuiAmountOptionsProvider({sign: 'always'})], }) export default class Example { protected readonly isMobile = inject(WA_IS_MOBILE); } ``` **LESS:** ```less :host { display: flex; flex-direction: column; gap: 5rem; } [tuiSubtitle] { white-space: nowrap; max-inline-size: 11rem; } ``` #### Example 3 **Template:** ```html

Payment successful
Transfer to John W

{{ -1050 | tuiAmount: 'USD' }} Today, 12:30
``` **TypeScript:** ```ts import {Component, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {WA_IS_MOBILE} from '@ng-web-apis/platform'; import {TuiAmountPipe} from '@taiga-ui/addon-commerce'; import {TuiResponsiveDialog} from '@taiga-ui/addon-mobile'; import {TuiButton, TuiTitle} from '@taiga-ui/core'; import {TuiAvatar} from '@taiga-ui/kit'; import {TuiBlockDetails} from '@taiga-ui/layout'; @Component({ imports: [ TuiAmountPipe, TuiAvatar, TuiBlockDetails, TuiButton, TuiResponsiveDialog, TuiTitle, ], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example { protected readonly isMobile = inject(WA_IS_MOBILE); protected open = false; } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; @Component({ imports: [TuiDemo], templateUrl: './index.html', changeDetection, }) export default class Page { public readonly examples = ['Full', 'Customization', 'Dialog']; } ``` --- # components/BlockStatus - **Package**: `LAYOUT` - **Type**: components - **Version**: 5.0.0 Component for status screens, result screens and zero screens ### Example ```html hidden content

Title

Description ``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [card] | `boolean` | enable border radius and padding for card view | | [size] | `TuiSizeL` | size (for desktop only) | ### Usage Examples #### Basic **Template:** ```html not found

Not found

Try to find by number ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBlockStatus} from '@taiga-ui/layout'; @Component({ imports: [TuiBlockStatus], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example {} ``` #### With actions **Template:** ```html @if (size(); as size) { survived

Something has been achieved

You can do something with it, or you can not do it. And the description text can be quite long. } ``` **TypeScript:** ```ts import {Component, computed, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TUI_BREAKPOINT, TuiButton, type TuiSizeL} from '@taiga-ui/core'; import {TuiBlockStatus} from '@taiga-ui/layout'; @Component({ imports: [TuiBlockStatus, TuiButton], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example { protected readonly breakpoint = inject(TUI_BREAKPOINT); protected readonly size = computed(() => this.breakpoint() === 'mobile' ? 'm' : 'l', ); } ``` #### Cards **Template:** ```html @if (size(); as size) {
hidden content We hide the unwanted block something wrong Something happened in this block
} ``` **TypeScript:** ```ts import {Component, computed, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TUI_BREAKPOINT, TuiButton, type TuiSizeL} from '@taiga-ui/core'; import {TuiBlockStatus} from '@taiga-ui/layout'; @Component({ imports: [TuiBlockStatus, TuiButton], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly breakpoint = inject(TUI_BREAKPOINT); protected readonly size = computed(() => this.breakpoint() === 'mobile' ? 'm' : 'l', ); } ``` **LESS:** ```less .container { display: flex; gap: 1rem; :host-context(tui-root._mobile) & { flex-direction: column; } } .image { inline-size: 5.5rem; block-size: 5.5rem; } .card { background-color: var(--tui-background-base-alt); block-size: auto; } ``` #### Customization **Template:** ```html
@for (user of users; track user) {
} You can put other content instead of image using tui-block-content css class Alex Inkin

Alex Inkin
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton} from '@taiga-ui/core'; import { TuiAutoColorPipe, TuiAvatar, TuiAvatarStack, TuiInitialsPipe, } from '@taiga-ui/kit'; import {TuiBlockStatus} from '@taiga-ui/layout'; @Component({ imports: [ TuiAutoColorPipe, TuiAvatar, TuiAvatarStack, TuiBlockStatus, TuiButton, TuiInitialsPipe, ], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly users = [ 'Alex Inkin', 'Vladimir Potekhin', 'Nikita Barsukov', 'Maxim Ivanov', ]; } ``` **LESS:** ```less .container { display: flex; gap: 1rem; :host-context(tui-root._mobile) & { flex-direction: column; } } .card { background-color: var(--tui-background-base-alt); block-size: auto; } .avatar[tuiSlot='top'] { inline-size: 6.25rem; block-size: 6.25rem; border-radius: 50%; } ``` #### Mobile **Template:** ```html
hidden content We hide the unwanted block something wrong Something happened in this block Something happened in this block
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiPlatform} from '@taiga-ui/cdk'; import {TuiButton} from '@taiga-ui/core'; import {TuiBlockStatus} from '@taiga-ui/layout'; @Component({ imports: [TuiBlockStatus, TuiButton, TuiPlatform], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less .container { display: flex; gap: 1rem; flex-direction: column; } .card { background-color: var(--tui-background-base-alt); block-size: auto; } ``` #### Desktop medium **Template:** ```html survived

There is nothing here yet

To get started, create a server ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton} from '@taiga-ui/core'; import {TuiBlockStatus} from '@taiga-ui/layout'; @Component({ imports: [TuiBlockStatus, TuiButton], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example {} ``` #### Empty image block **Template:** ```html

Something happened in this block

Try again later ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton} from '@taiga-ui/core'; import {TuiBlockStatus} from '@taiga-ui/layout'; @Component({ imports: [TuiBlockStatus, TuiButton], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example {} ``` #### Empty description block **Template:** ```html
hidden content

No operations

 hidden content

No operations
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton} from '@taiga-ui/core'; import {TuiBlockStatus} from '@taiga-ui/layout'; @Component({ imports: [TuiBlockStatus, TuiButton], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less .container { display: flex; gap: 1rem; flex-direction: column; } .card { background-color: var(--tui-background-base-alt); block-size: auto; } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import {TuiButton, type TuiSizeL} from '@taiga-ui/core'; import {TuiBlockStatus} from '@taiga-ui/layout'; @Component({ imports: [TuiBlockStatus, TuiButton, TuiDemo], templateUrl: './index.html', changeDetection, }) export default class Example { protected card = false; protected readonly sizes: TuiSizeL[] = ['l', 'm']; protected size = this.sizes[0] || 'l'; protected readonly examples = [ 'Basic', 'With actions', 'Cards', 'Customization', 'Mobile', 'Desktop medium', 'Empty image block', 'Empty description block', ]; } ``` --- # components/BottomSheet - **Package**: `ADDON-MOBILE` - **Type**: components - **Version**: 5.0.0 A non-modal draggable sheet ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [stops] | `readonly string[]` | scroll snap stops | | [bar] | `boolean` | shows/hides drag bar at the top of the sheet | ### Usage Examples #### Basic **Template:** ```html
What's up?
@for (message of messages; track message) {
}
``` **TypeScript:** ```ts import {Component, ElementRef, viewChild} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBottomSheet} from '@taiga-ui/addon-mobile'; import {TuiButton, TuiScrollbar} from '@taiga-ui/core'; import {TuiMessage, TuiTextarea} from '@taiga-ui/kit'; import {TuiCardLarge} from '@taiga-ui/layout'; @Component({ imports: [ FormsModule, TuiBottomSheet, TuiButton, TuiCardLarge, TuiMessage, TuiScrollbar, TuiTextarea, ], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { private readonly sheet = viewChild(TuiBottomSheet, {read: ElementRef}); protected messages = ['Check that awesome bottom sheet out!']; protected value = ''; protected onClick(message: string): void { this.messages = this.messages.concat(message); this.sheet()?.nativeElement.scrollTo({top: 0, behavior: 'smooth'}); } protected onSubmit(): void { this.messages = this.messages.concat(this.value); this.value = ''; } } ``` **LESS:** ```less :host { display: flex; flex-direction: column; block-size: 30rem; } .messages { position: relative; flex: 1; padding-inline-start: 1rem; overflow: hidden; } .message { display: block; margin: 1rem 1rem 1rem auto; max-inline-size: 80%; white-space: pre-wrap; &:last-child { margin-block-end: 4rem; } } .form { padding: 0 1rem 1rem; background: var(--tui-background-elevation-1); } .textarea { margin: 1rem 0; } .actions { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; :last-child { grid-column: span 2; } } ``` #### Reacting to scroll **Template:** ```html
Map Website

London United Kingdom

Population 8,866,180
Area 1,572 square km
Time zone UTC+00:00 (Greenwich Mean Time)
Established 47 AD
London is the capital and largest city of both England and the United Kingdom, with a population of 8,866,180 in 2022. Its wider metropolitan area is the largest in Western Europe, with a population of 14.9 million. London stands on the River Thames in southeast England, at the head of a 50-mile (80 km) tidal estuary down to the North Sea, and has been a major settlement for nearly 2,000 years. Its ancient core and financial centre, the City of London, was founded by the Romans and has retained its medieval boundaries. The City of Westminster, to the west of the City of London, has been the centuries-long host of the national government and parliament. London grew rapidly in the 19th century, becoming the world's largest city at the time. Since the 19th century, the name "London" has referred to the metropolis around the City of London. ``` **TypeScript:** ```ts import {Component, type ElementRef, viewChild} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBottomSheet} from '@taiga-ui/addon-mobile'; import {TuiButton, TuiTitle} from '@taiga-ui/core'; import {TuiHeader} from '@taiga-ui/layout'; @Component({ imports: [TuiBottomSheet, TuiButton, TuiHeader, TuiTitle], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected readonly button = viewChild>('buttons'); protected readonly stops = ['112px'] as const; protected onScroll({clientHeight, scrollTop}: HTMLElement): void { const offset = Number.parseInt(this.stops[0], 10); const top = Math.min(scrollTop, clientHeight - offset); const transform = `translate3d(0, ${-top}px, 0)`; this.button()?.nativeElement.style.setProperty('transform', transform); } } ``` **LESS:** ```less @import '@taiga-ui/styles/utils'; :host { position: relative; display: block; overflow: hidden; } .map { inline-size: 18rem; block-size: 30rem; border: none; } .buttons { .fullsize(); display: flex; gap: 1rem; padding: 1rem 1rem 8rem; flex-direction: column; align-items: flex-end; justify-content: flex-end; box-sizing: border-box; pointer-events: none; & > * { position: relative; pointer-events: auto; } } .sheet { block-size: 25.75rem; } .content { display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0; } ``` #### Stops **Template:** ```html
Taiga UI Give us a Star
@if (show) { @for (_ of '-'.repeat(20); track $index) {

All work and no play makes Jack a dull boy

} All work and no play makes Jack a dull boy } ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiBottomSheet} from '@taiga-ui/addon-mobile'; import {TuiButton, TuiCheckbox} from '@taiga-ui/core'; import {TuiAccordion, TuiBlock} from '@taiga-ui/kit'; @Component({ imports: [ FormsModule, TuiAccordion, TuiBlock, TuiBottomSheet, TuiButton, TuiCheckbox, ], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example { protected show = true; } ``` **LESS:** ```less :host { position: relative; display: flex; align-items: flex-start; justify-content: center; inline-size: 14rem; block-size: 26rem; padding: 2rem; background: linear-gradient(45deg, #4158d0 0%, #c850c0 50%, #ffcc70 100%); overflow: hidden; } .header { position: sticky; z-index: 1; display: flex; inset-block-start: 2.25rem; flex-direction: column; gap: 1rem; font: var(--tui-typography-heading-h5); font-size: 1.25rem; background: var(--tui-background-elevation-1); box-shadow: 0 -1rem var(--tui-background-elevation-1); } ``` ### TypeScript ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; @Component({ imports: [TuiDemo], templateUrl: './index.html', changeDetection, }) export default class Page { protected readonly examples = ['Basic', 'Reacting to scroll', 'Stops']; } ``` --- # components/Breadcrumbs - **Package**: `KIT` - **Type**: components - **Version**: 5.0.0 Navigation element that shows a path from root page to the current ### Example ```html @for (item of items; track item) { } ``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [itemsLimit] | `number` | limit on visible items | | [size] | `TuiSizeL` | text size | ### Usage Examples #### Basic **Template:** ```html @for (item of items; track item) { {{ item.caption }} } @for (item of items; track item) { {{ item.caption }} } ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {RouterLink} from '@angular/router'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiItem} from '@taiga-ui/cdk'; import {TuiLink} from '@taiga-ui/core'; import {TuiBreadcrumbs} from '@taiga-ui/kit'; @Component({ imports: [RouterLink, TuiBreadcrumbs, TuiItem, TuiLink], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example { protected items = [ { caption: 'Selects', routerLink: '/components/select', }, { caption: 'Multi', routerLink: '/components/multi-select', }, { caption: 'With tags', routerLink: '/components/multi-select', }, { caption: 'Current', routerLink: '/navigation/breadcrumbs', routerLinkActiveOptions: {exact: true}, }, ]; } ``` #### Overflow **Template:** ```html

Truncate Using .text-truncate() mixin

@for (item of items; track item) { }

Fade Combining .text-truncate() mixin with Fade directive

@for (item of items; track item) { }

Scroll Putting Fade directive on entire component

@for (item of items; track item) { }

Collapse Using itemsLimit: number

@for (item of items; track item) { } ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {RouterLink} from '@angular/router'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {DemoRoute} from '@demo/routes'; import {TuiItem} from '@taiga-ui/cdk'; import {TuiHint, TuiLink, TuiTitle} from '@taiga-ui/core'; import {TuiBreadcrumbs, tuiBreadcrumbsOptionsProvider, TuiFade} from '@taiga-ui/kit'; @Component({ imports: [RouterLink, TuiBreadcrumbs, TuiFade, TuiHint, TuiItem, TuiLink, TuiTitle], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, providers: [tuiBreadcrumbsOptionsProvider({icon: '/'})], }) export default class Example { protected readonly fade = DemoRoute.Fade; protected readonly items = [ 'First item', 'Very very long second item that must overflow', 'Third item', 'One last super long item that is never gonna fit', ]; } ``` **LESS:** ```less @import '@taiga-ui/styles/utils'; :host { display: block; max-inline-size: 30rem; } hr, h3 { margin: 1rem 0; } hr { block-size: 1px; background: var(--tui-border-normal); border: 0; } .link { .text-truncate(); &_last { font-weight: bold; color: var(--tui-text-primary); } } ``` ### TypeScript ```ts import {Component, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import {TuiItem} from '@taiga-ui/cdk'; import {TuiLink, type TuiSizeL} from '@taiga-ui/core'; import {TUI_BREADCRUMBS_OPTIONS, TuiBreadcrumbs} from '@taiga-ui/kit'; @Component({ imports: [TuiBreadcrumbs, TuiDemo, TuiItem, TuiLink], templateUrl: './index.html', changeDetection, }) export default class Example { private readonly options = inject(TUI_BREADCRUMBS_OPTIONS); protected readonly examples = ['Basic', 'Overflow']; protected readonly items = [ 'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', ]; protected readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l']; protected size = this.options.size; protected itemsLimit = this.options.itemsLimit; } ``` --- # components/Button - **Package**: `CORE` - **Type**: components - **Version**: 5.0.0 Button is a basic component used for both icon buttons and regular buttons with optional icons on either side. It can be applied to `button` , `a` and `label` tags. When used as `tuiIconButton` don't forget to still put text label within the tag for accessibility. ### Example ```html ``` ### API - Inputs | Property | Type | Description | |----------|-----|----------| | [size] | `TuiSizeXS \| TuiSizeL` | — | | [loading] | `boolean` | ) | ### Usage Examples #### Sizes Simple buttons with preset size options. **Template:** ```html ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton} from '@taiga-ui/core'; @Component({ imports: [TuiButton], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: flex; gap: 1rem; } ``` #### Appearance Buttons support all built-in appearances. See Appearance directive for more. **Template:** ```html
Use tuiAppearanceMode to emulate :checked / :invalid CSS state for outline appearance:
``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton} from '@taiga-ui/core'; @Component({ imports: [TuiButton], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: flex; gap: 1rem; flex-wrap: wrap; } ``` #### Icons Using icons and other elements, such as an Avatar inside buttons in a variety of ways. **Template:** ```html ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton, TuiIcon} from '@taiga-ui/core'; import {TuiAvatar, TuiChevron} from '@taiga-ui/kit'; @Component({ imports: [TuiAvatar, TuiButton, TuiChevron, TuiIcon], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; --tui-font-icon: 'Material Symbols Outlined'; } ``` #### Loading Buttons can show a loading indicator when performing an action. Dedicated `TuiButtonLoading` component helps with accessibility by keeping button focusable while preventing click events. **Template:** ```html ``` **TypeScript:** ```ts import {AsyncPipe} from '@angular/common'; import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TUI_FALSE_HANDLER} from '@taiga-ui/cdk'; import {TuiButton} from '@taiga-ui/core'; import {TuiButtonLoading} from '@taiga-ui/kit'; import {map, startWith, Subject, switchMap, timer} from 'rxjs'; @Component({ imports: [AsyncPipe, TuiButton, TuiButtonLoading], templateUrl: './index.html', encapsulation, changeDetection, }) export default class Example { protected readonly trigger$ = new Subject(); protected readonly loading$ = this.trigger$.pipe( switchMap(() => timer(2000).pipe(map(TUI_FALSE_HANDLER), startWith('Loading'))), ); } ``` #### Options with DI Default values for buttons can be configured using DI options. **Template:** ```html ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton, tuiButtonOptionsProvider} from '@taiga-ui/core'; @Component({ imports: [TuiButton], templateUrl: './index.html', encapsulation, changeDetection, providers: [tuiButtonOptionsProvider({size: 's'})], }) export default class Example {} ``` #### Vertical Use `tuiButtonVertical` attribute to set different layout. **Template:** ```html ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton} from '@taiga-ui/core'; import {TuiAvatar, TuiFade} from '@taiga-ui/kit'; @Component({ imports: [TuiAvatar, TuiButton, TuiFade], templateUrl: './index.html', styles: ':host { display: flex; gap: 1rem; align-items: flex-start; }', encapsulation, changeDetection, }) export default class Example {} ``` #### Two labels Nested elements with a little bit of CSS can make button appear to have sections. **Template:** ```html

``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton} from '@taiga-ui/core'; import {TuiFade} from '@taiga-ui/kit'; @Component({ imports: [TuiButton, TuiFade], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less .button { inline-size: 15rem; justify-content: space-between; } ``` #### Link Using `tuiButton` on an `` element preserves native link semantics — right-click, open in new tab, and URL preview all work as expected. **Template:** ```html Documents Music Library ``` **TypeScript:** ```ts import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiButton} from '@taiga-ui/core'; @Component({ imports: [TuiButton], templateUrl: './index.html', styleUrl: './index.less', encapsulation, changeDetection, }) export default class Example {} ``` **LESS:** ```less :host { display: flex; gap: 1rem; } ``` #### Label Using `tuiButton` on a `