Separate toggles
Open First Second ``` -------------------------------- ### Basic Date Picker Usage Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/date-picker/examples/4/index.html Illustrates the fundamental setup for a Date Picker component. ```html
@for (example of examples; track example) {
}
Title
Description Action enable border radius and padding for card view size (for desktop only)
``` -------------------------------- ### Install Taiga UI dependencies Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/kit/README.md Command to install the core Taiga UI packages including CDK, core, and kit. This is the standard installation method for Angular applications using Taiga UI. ```bash npm i @taiga-ui/{cdk,core,kit} ``` -------------------------------- ### Lazy Loading Routes Example Source: https://github.com/taiga-family/taiga-ui/blob/main/AGENTS.md Example of how to configure lazy-loaded routes using standalone components. ```typescript export const routes: Routes = [ { path: 'feature', loadComponent: async () => (await import('./feature/feature.component')).FeatureComponent, }, ]; ``` -------------------------------- ### Install Taiga UI Core Packages Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/experimental/README.md Installs the essential base packages for Taiga UI, including CDK and core functionalities. These are foundational for using other Taiga UI libraries. ```bash npm i @taiga-ui/cdk @taiga-ui/core ``` -------------------------------- ### FloatingContainer Examples Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/floating-container/index.html Demonstrates various use cases for the FloatingContainer, including scroll-based appearance, use within dialogs, and custom content. ```HTMLAny kind of content can be placed inside. Use `animation: none` to prevent pop-in animation.
Overlay color can be customized.
Appearing on scroll and toggling of secondary action.
Using inside a SheetDialog
| Checkbox | Title | Cell | Status | Items | Progress | Actions |
|---|---|---|---|---|---|---|
|
|
{{ item.title.title }} @if (item.title.chip && item.title.subtitle) { {{ item.title.chip }} } @else if (!item.title.subtitle && item.title.chip) { {{ item.title.chip }} } @else { {{ item.title.subtitle }} } | {{ item.cell.name }} {{ item.cell.email }} | {{ item.status.value }} | @for (chip of item.items; track chip) { {{ chip }} } + {{ item.items.length - number - 1 }} | {{ item.progress }}ms | Edit More |
Dropdown
```
--------------------------------
### Tabs with Buttons
Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/tabs/index.html
Example of rendering buttons within tabs. The content of each button is displayed directly.
```HTML
Content!
{{ example.content }}
| {{ column }} | }|||
|---|---|---|---|
| {{ rowInfo.character }} | {{ rowInfo.actor }} |
* * *
Nevermind
``` -------------------------------- ### Nested Dropdown Hover Example Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/directives/dropdown-hover/examples/3/index.html Shows an example of a nested dropdown hover structure. This enables dropdowns within dropdowns for complex navigation or selection. ```HTML
Nested dropdown hover
```
--------------------------------
### Mobile Calendar Template Example
Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-mobile/components/mobile-calendar/mobile-calendar.template.html
An example of the mobile calendar template structure, including conditional rendering and loops for days and months.
```html
@if (chooseDayOrRangeTexts?.(); as texts) {
{{ closeWord() }} {{ cancelWord() }}
@let text = multi() ? texts[2] : texts[1]; {{ single() ? texts[0] : text }}
---------------------------------------------------------------------------------
{{ doneWord() }}
}
{{ index }}
@for (day of unorderedWeekDays$ | tuiOrderWeekDays | async; track day) {
{{ day }}
}
{{ monthNames()[month.month] }}
---------------------------------
```
--------------------------------
### Obfuscate strings using tuiObfuscate pipe
Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/pipes/obfuscate/examples/1/index.html
Demonstrates how to use the tuiObfuscate pipe in Angular templates. The first example uses the default masking, while the second example allows for a custom mask character.
```html
{{ '+7(900)500-40-20' | tuiObfuscate }}
{{ '2200 4400' | tuiObfuscate: '#' }}
```
--------------------------------
### Dynamic Columns with Structural Directives
Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/table/index.html
Demonstrates how to use structural directives for creating dynamic table columns.
```html
Nested content!
|
{{ column.label }}
|
|---|
|
|
@switch (state()) {
@case ('progress') { }
@case ('loader') { }
@case ('error') { }
@case ('button') { Retry }
}
file.png
@switch (state()) {
@case ('normal') {
5 MB
}
@case ('error') {
Over 30 MB
}
@case ('button') {
Not uploaded
}
@default {
Uploading...
}
}
}
```
--------------------------------
### Install Taiga UI Charts Addon
Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-charts/README.md
Installs the specific addon package for Taiga UI charts. This package provides various charting and graph components to enhance data visualization in Angular applications.
```bash
npm i @taiga-ui/addon-charts
```
--------------------------------
### Hint Directive Usage
Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/directives/hint/index.html
Demonstrates the basic usage of the `*tuiHint` directive. Ensure it's nested within a `tuiHint` directive for correct dependency injection.
```html
@for (example of examples; track example) { @if ($index === 1) {
Make sure `*tuiHint` directive is nested inside `tuiHint` directive so that dependency injection works properly
} }
```
--------------------------------
### Install Taiga UI Table dependencies
Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-table/README.md
Commands to install the required base packages and the specific table addon package for Taiga UI using npm. These packages are necessary to enable table functionality in an Angular project.
```bash
npm i @taiga-ui/{cdk,core}
npm i @taiga-ui/addon-table
```
--------------------------------
### Configuring Highlight Options
Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/directives/highlight/index.html
Explains how to customize the highlight color using the `TUI_HIGHLIGHT_OPTIONS` token and the `tuiHighlightOptionsProvider` function.
```APIDOC
## Configuring Highlight Color
### Description
Customize the default highlight color using the `TUI_HIGHLIGHT_OPTIONS` injection token. This is achieved by providing a new value for the `highlightColor` property.
### Method
Configuration via Injection Token
### Endpoint
N/A (Client-side configuration)
### Parameters
#### `TUI_HIGHLIGHT_OPTIONS` Token
- **highlightColor** (string) - Optional - The desired color for the text highlight. Defaults to a predefined color if not specified.
### Usage
Use the `tuiHighlightOptionsProvider` function in your Angular module or component to provide a custom value for `TUI_HIGHLIGHT_OPTIONS`.
### Request Example
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TuiHighlightModule, tuiHighlightOptionsProvider } from '@taiga-ui/kit';
@NgModule({
imports: [
CommonModule,
TuiHighlightModule
],
providers: [
tuiHighlightOptionsProvider({
highlightColor: 'yellow'
})
]
})
export class AppModule {}
```
### Response
N/A
#### Success Response (N/A)
N/A
#### Response Example
N/A
```
--------------------------------
### Iterate and Render Duo Icon with @for
Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/chip/examples/2/index.html
Illustrates iterating over 'sizes' and rendering a 'Duo icon' for each item. The 'track size' directive is used for performance.
```HTML
@for (size of sizes; track size) { Duo icon }
```
--------------------------------
### Basic String Input
Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/input/index.html
Demonstrates the fundamental usage of the Input component for basic string values.
```HTML
@for (example of examples; track example) { @switch ($index) { @case (0) { Basic string value input. } @case (1) { You can change states of the component manually or it can follow state of a form control when Angular form directives are applied to it. } @case (2) { For more complex dropdown controls it is recommended to use dedicated components, such as Select or ComboBox } @case (3) { An example of a password textfield with an interactive icon to toggle the input type. } @case (4) { If you need to perform some additional actions or logging when user clicks cleaner button. } @case (5) {
We recommends using [Maskito](https://maskito.dev) for input masking. **Maskito** is supported by Taiga Family team and it is already peer-dependency of `@taiga-ui/kit` library.
This example demonstrates how to use built-in [Number](https://maskito.dev/kit/number) mask with postfix and augment it by several **Maskito** plugins.
} @case (6) { On mobile, especially when font scaling is enabled for accessibility, you have limited space and might want to make sure the entire label is visible when the user fills it in. You can enable wrapping so it can wrap onto multiple lines. } } }
@if (textfield.size !== 's') {
I am a label
}
text value (alternatively use reactive forms) grayed out guiding text
```
--------------------------------
### Complex Expandable Table Sections
Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/table/index.html
Provides examples of more complex expandable section implementations in tables.
```html
Chat message content here
```
--------------------------------
### Basic Input Phone International
Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/input-phone-international/index.html
A basic example of using the InputPhoneInternational component. It allows users to input phone numbers in an international format.
```html