Taiga UI

https://github.com/taiga-family/taiga-ui
Admin
Angular UI Kit and components library for awesome people
Tokens:318,242
Snippets:2,229
Trust Score:9.3
License:Apache-2.0
Update:1 day ago
Show doc for...
Tokens:
Raw
### Install @taiga-ui/layout

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/layout/README.md

Install the layout package.

```bash
npm i @taiga-ui/layout
```

--------------------------------

### Jest configuration with preset and setup file

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/info/testing/jest/examples/jest-config-custom.md

Defines a Jest configuration object using the 'jest-preset-angular' preset and specifies a setup file for environment configuration. The setup file is referenced via '<rootDir>/setup-jest.ts'.

```TypeScript
import type {Config} from 'jest';

const config: Config = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};

export default config;
```

--------------------------------

### Install addon-doc

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-doc/README.md

Install the documentation library itself.

```bash
npm i @taiga-ui/addon-doc
```

--------------------------------

### Dark mode initialization script

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/app/getting-started/examples/index.md

Sets the tuiTheme attribute to 'dark' on the body based on the stored theme or system preference. Uses the key 'tuiDark' by default, but can be customized via TUI_DARK_MODE_KEY. Place this script in the HTML head to avoid flash of incorrect theme.

```html
<!doctype html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
  <script>
    // Or whatever key you provided to TUI_DARK_MODE_KEY
    const theme = localStorage?.getItem('tuiDark');

    if (theme === 'true' || (!theme && matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.body.setAttribute('tuiTheme', 'dark');
    }
  </script>
</html>
```

--------------------------------

### Install @taiga-ui/experimental

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/experimental/README.md

Install the experimental package after the base packages.

```bash
npm i @taiga-ui/experimental
```

--------------------------------

### Install addon-table

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-table/README.md

Install the addon-table package.

```bash
npm i @taiga-ui/addon-table
```

--------------------------------

### Jest configuration with @taiga-ui/jest-config preset

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/info/testing/jest/examples/jest-config.md

Use this configuration to set up Jest with the Taiga UI preset. The preset simplifies Jest setup for Taiga UI projects.

```TypeScript
import type {Config} from 'jest';

const config: Config = {
  preset: '@taiga-ui/jest-config',
};

export default config;
```

--------------------------------

### Install addon-commerce

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-commerce/README.md

Install the Commerce add-on package.

```bash
npm i @taiga-ui/addon-commerce
```

--------------------------------

### Install @taiga-ui/cdk

Source: https://github.com/taiga-family/taiga-ui/wiki/Home

Install the CDK package via npm. This is the first step to use the CDK's abstractions.

```bash
npm i @taiga-ui/cdk
```

--------------------------------

### Install addon-charts

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-charts/README.md

Install the addon-charts package.

```bash
npm i @taiga-ui/addon-charts
```

--------------------------------

### Working with objects

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/input-chip/examples/4/index.html

Uses @for with tuiFilterByInput to iterate over users and more objects.

```html
@for (user of users | tuiFilterByInput; track user) {
  {{ user.name }}
}
```

```html
@for (user of more | tuiFilterByInput; track user) {
  {{ user.name }}
}
```

--------------------------------

### Arbitrary strings with suggestions

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/input-chip/examples/4/index.html

Uses @if with tuiHideSelected and tuiFilterByInput to show suggestions for arbitrary string input.

```html
@if (items | tuiHideSelected | tuiFilterByInput; as items) {
  @if (items.length) {
  }
}
```

--------------------------------

### Install addon-mobile

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-mobile/README.md

Install the addon-mobile package via npm.

```bash
npm i @taiga-ui/addon-mobile
```

--------------------------------

### Install base packages

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-commerce/README.md

Install the base Taiga UI packages required for the Commerce add-on.

```bash
npm i @taiga-ui/{cdk,core}
```

--------------------------------

### Install base packages

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-mobile/README.md

Install the required Taiga UI base packages (cdk, core, kit) via npm.

```bash
npm i @taiga-ui/{cdk,core,kit}
```

--------------------------------

### Setup Jest with @taiga-ui/jest-config

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/info/testing/jest/examples/setup-jest.md

Imports the Taiga UI Jest configuration polyfill and creates custom mocks for browser events. The polyfill includes setupZoneTestEnv. Custom mocks are defined for AnimationEvent, TransitionEvent, and DragEvent.

```TypeScript
import '@taiga-ui/jest-config/polyfill'; // included setupZoneTestEnv

// make custom mocks
(window as any).AnimationEvent = {};
(window as any).TransitionEvent = {};
(window as any).DragEvent = class {};
// ...
```

--------------------------------

### Create page component

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-doc/README.md

Define a documentation page component. The example object keys are used as tabs for code examples; values can be imported file strings or inline strings.

```typescript
// ..

@Component({
  selector: 'first-doc-page',
  templateUrl: './super.component.html',
  imports: [TuiAddonDoc],
})
export class DocPage {
  // Keys would be used as tabs for code example
  readonly example = {
    // import a file as a string
    TypeScript: import('./examples/1/index.ts?raw', {with: {loader: 'text'}}),
    HTML: import('./examples/1/index.html', {with: {loader: 'text'}}),
    LESS: '.box { color: red }',
  };

  readonly inputVariants = ['input 1', 'input 2'];
}
```

--------------------------------

### Install Taiga UI add-on packages with npm

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/app/getting-started/examples/addons.md

Install the optional Taiga UI add-on packages via npm. Each package provides specific functionality: addon-charts for charts, addon-commerce for money-related components, addon-mobile for mobile-specific tools, addon-table for interactive tables, addon-doc for documentation portals, and layout for layout components.

```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
```

--------------------------------

### Bootstrap Angular application with server rendering

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/app/getting-started/examples/main.server.md

Configures and bootstraps an Angular application for server-side rendering using Angular Universal and @ng-web-apis/universal. Merges the app config with server-specific providers and exports a default async function that returns the application reference.

```typescript
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<ApplicationRef> =>
  bootstrapApplication(App, serverConfig, context);
```

--------------------------------

### Install Taiga UI with ng add

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/taiga-schematics/README.md

Run this command to add Taiga UI schematics to an Angular project. It is the primary installation step.

```bash
ng add taiga-ui
```

--------------------------------

### Lazy-loaded route example with loadComponent

Source: https://github.com/taiga-family/taiga-ui/blob/main/AGENTS.md

Use this route configuration to lazy-load a standalone feature component in Angular. The example shows the `loadComponent` syntax with dynamic import, which is recommended for feature routes.

```typescript
export const routes: Routes = [
  {
    path: 'feature',
    loadComponent: async () => (await import('./feature/feature.component')).FeatureComponent,
  },
];
```

--------------------------------

### Create a custom portal service extending TuiPortalService

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/customization/portals/examples/setup/create-service.md

Define a service that extends TuiPortalService and is provided in the root injector. Use this as a base for custom portal logic in Taiga UI.

```TypeScript
@Injectable({
  providedIn: 'root',
})
export class MyPortalService extends TuiPortalService {}
```

--------------------------------

### Conditional input in textfield Multi Select with if/else

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/input-chip/examples/4/index.html

Shows conditional input using @if and @else for a toggle filter.

```html
@if (filter) {
  
} @else {
  
}
```

--------------------------------

### Only allowing items from the list and hiding values when not focused

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/input-chip/examples/4/index.html

Shows a custom content select with conditional rendering based on input focus and filtered items.

```html
@if (!input.focused()) {
}
```

```html
@if (items | tuiHideSelected | tuiFilterByInput; as items) {
  @if (items.length) {
  }
}
```

--------------------------------

### Import getPaymentSystem from @taiga-ui/kit

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/utils/miscellaneous/examples/import/component.md

Use this snippet to import the getPaymentSystem function from the @taiga-ui/kit package. The example shows the import statement and a usage example where the function is called with a cardNumber variable to assign the result to a paymentSystem property.

```TypeScript
import {getPaymentSystem} from '@taiga-ui/kit';

//...
paymentSystem = getPaymentSystem(cardNumber);
// ...
```

--------------------------------

### Create page template

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-doc/README.md

Define the template for a documentation page, including tabs, examples, and API table.

```html
<tui-doc-page
  header="Super"
  package="SUPER-PACKAGE"
>
  <ng-template pageTab>
    <!-- default tab name would be used -->
    This would be the content of a first tab

    <tui-doc-example
      id="basic-example"
      heading="Example of usage"
      [content]="example"
    >
      <example-1></example-1>
    </tui-doc-example>
  </ng-template>

  <ng-template pageTab="Documentation">
    <tui-doc-demo>
      <super-component [input]="input"></super-component>
    </tui-doc-demo>

    <table tuiDocAPI>
      <tr
        name="[input]"
        tuiDocAPIItem
        type="T"
        [items]="inputVariants"
        [(value)]="input"
      >
        Some input description
      </tr>
    </table>
  </ng-template>
</tui-doc-page>
```

--------------------------------

### Install @taiga-ui/icons with npm

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/icons/README.md

Install the Taiga UI icons package via npm. The library is fully tree-shakable, so importing even a single entity avoids redundant code in your bundle.

```bash
npm i @taiga-ui/icons
```

--------------------------------

### Provide TUI_POPOUT_CONFIG with zoneless change detection

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/popout/examples/import/service.md

Configures the TUI_POPOUT_CONFIG provider with provideExperimentalZonelessChangeDetection for Angular ^20.2. Use this in the component's providers to enable zoneless change detection for the popout service.

```ts
import {TUI_POPOUT_CONFIG} from '@taiga-ui/experimental';
// Use provideZonelessChangeDetection for Angular ^20.2
import {provideExperimentalZonelessChangeDetection} from '@angular/core';

@Component({
  // ...
  providers: [
    {
      provide: TUI_POPOUT_CONFIG,
      useValue: {providers: [provideExperimentalZonelessChangeDetection()]},
    },
  ],
})
export default class Example {
  private readonly popout = inject(TuiPopoutService);

  // ...
}
```

--------------------------------

### Bootstrap application with provideTaiga

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/app/getting-started/examples/main-standalone.md

Use this snippet to bootstrap a standalone Angular application with Taiga UI. It imports provideTaiga from @taiga-ui/core and adds it to the providers array in bootstrapApplication. The catch(console.error) handles any bootstrap errors.

```ts
import {provideTaiga} from '@taiga-ui/core';
// ...

bootstrapApplication(App, {
  providers: [
    provideTaiga(),
    //...
  ],
}).catch(console.error);
```

--------------------------------

### Open a sheet dialog with TuiSheetDialogService

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/sheet-dialog/examples/import/component.md

Inject TuiSheetDialogService and call its open method with content and options. The options include a label and an offset of 48 pixels. The method returns an observable that you subscribe to.

```TypeScript
constructor(private readonly sheets: TuiSheetDialogService) {}

// ...

this.sheets
    .open(
        'Content',
        {
            label: 'Heading',
            offset: 48,
        },
    )
    .subscribe();
```

--------------------------------

### App component with TuiRoot import

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/app/getting-started/examples/app-standalone.md

Shows how to import TuiRoot from '@taiga-ui/core' and include it in the component's imports array for a standalone Angular application.

```TypeScript
import {TuiRoot} from '@taiga-ui/core';
// ..

@Component({
  selector: 'app-root',
  imports: [
    TuiRoot,
    // ...
  ],
  templateUrl: './app.component.html',
})
export class App {}
```

--------------------------------

### Define inputs with input() API

Source: https://github.com/taiga-family/taiga-ui/blob/main/AGENTS.md

Use the new input() API for component inputs. The example shows a required input of type Item[].

```typescript
import {input} from '@angular/core';
export class MyComponent {
  readonly items = input.required<Item[]>();
}
```

--------------------------------

### Override TUI_DARK_MODE_KEY in bootstrapApplication

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/customization/dark-mode/setup.md

Provides a custom localStorage key for dark mode persistence. Overrides the default 'tuiDark' key with 'myAppTheme'.

```TypeScript
import {TUI_DARK_MODE_KEY} from '@taiga-ui/core';

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: TUI_DARK_MODE_KEY,
      // Override the default 'tuiDark' localStorage key
      useValue: 'myAppTheme',
    },
  ],
});
```

--------------------------------

### Regular list with keyvalue pipe

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/list/examples/3/index.html

Displays a list of key-value pairs using Angular's @for loop with the keyvalue pipe. The track expression uses $index for tracking.

```html
@for (item of data | keyvalue; track $index) {

{{ item.key }}

{{ item.value }}

}
```

--------------------------------

### Import TUI_CONFIRM and open confirmation dialog

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/confirm/examples/import/service.md

Use this snippet to import TUI_CONFIRM from '@taiga-ui/kit' and open a confirmation dialog via TuiDialogService. The dialog returns a boolean response that you can subscribe to. The data object sets the content, yes, and no labels for the dialog.

```TypeScript
import {TUI_CONFIRM} from '@taiga-ui/kit';

// ...
export class Example {
  private readonly dialogs = inject(TuiDialogService);

  confirm() {
    this.dialogs
      .open<boolean>(TUI_CONFIRM, {
        label: 'Are you sure?',
        data: {
          content: 'This action has consequences',
          yes: 'Whatever...',
          no: 'Oops!',
        },
      })
      .subscribe((response) => {
        // ...
      });
  }
}
```

--------------------------------

### Add Taiga UI MCP server to Codex CLI

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/info/ai/mcp/snippets/mcp-codex-cli.md

Registers the Taiga UI MCP server with Codex CLI using the `codex mcp add` command. The command runs the `@taiga-ui/mcp` package via `npx` and points it to the Taiga UI documentation source URL.

```bash
codex mcp add taiga-ui -- \
  npx -y @taiga-ui/mcp@latest --source-url=https://taiga-ui.dev/llms-full.txt
```

--------------------------------

### Import and use clamp from @tinkoff-ui/angular-cdk

Source: https://github.com/taiga-family/taiga-ui/wiki/Math

Use the clamp utility to clamp a value between two inclusive limits. Import it from '@tinkoff-ui/angular-cdk' and call clamp(value, min, max) to get the clamped result.

```typescript
import {clamp} from '@tinkoff-ui/angular-cdk';

// ...
clamped = clamp(value, min, max)
// ...
```

--------------------------------

### Inject TuiKeyboardService and toggle keyboard

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/services/keyboard-service/examples/inject.md

Use Angular's inject function to obtain TuiKeyboardService from @taiga-ui/cdk. The example shows a class with a private keyboard field and a toggle method that calls keyboard.toggle().

```TypeScript
import {inject} from '@angular/core';
import {TuiKeyboardService} from '@taiga-ui/cdk';

// ...
export class Example {
  private readonly keyboard = inject(TuiKeyboardService);

  toggle(): void {
    this.keyboard.toggle();
  }
}
```

--------------------------------

### Provide TUI_VIEWPORT with custom viewport factory

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/customization/viewport/examples/import/providers.md

Use this Angular provider to supply a custom viewport implementation for Taiga UI's TUI_VIEWPORT token. The factory uses WA_WINDOW to access the window object and returns a viewport with getClientRect() that reports the full window dimensions. Note: WA_WINDOW is referenced but not imported in the snippet; ensure it is available in your project.

```TypeScript
import {Component} from '@angular/core';
import {TUI_VIEWPORT} from '@taiga-ui/core';

@Component({
  // ...
  providers: [
    {
      provide: TUI_VIEWPORT,
      useFactory: () => {
        const win = inject(WA_WINDOW);

        return {
          type: `viewport`,
          getClientRect() {
            return {
              top: 0,
              left: 0,
              right: win.innerWidth,
              bottom: win.innerHeight,
              width: win.innerWidth,
              height: win.innerHeight,
            };
          },
        };
      },
    },
  ],
})
export class Example {}
```

--------------------------------

### Use signals for internal state

Source: https://github.com/taiga-family/taiga-ui/blob/main/AGENTS.md

Use signals for internal component state and computed() for derived state. The example shows a private signal and a computed value.

```typescript
export class MyComponent {
  private readonly count = signal(0);
  readonly doubleCount = computed(() => this.count() * 2);
}
```

--------------------------------

### Angular template with @for and @if

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/slides/examples/1/index.html

Uses Angular's @for and @if control flow to iterate over items and conditionally display the current item and its repeated version.

```html
@for (item of items; track item) { @if ($index === index) {

{{ item }}

{{ item.repeat(10) }}

} }
```

--------------------------------

### Angular template for toggling legend categories

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/legend-item/examples/2/index.html

Use this Angular template when you need to toggle a category by a separate action, such as expanding it for more details on click. It iterates over labels and displays the corresponding data value formatted with the tuiAmount pipe in RUB.

```HTML
@for (label of labels; track label) { {{ data[$index] || 0 | tuiAmount: 'RUB' }} }
```

--------------------------------

### Add styles in a directive with TuiDirectiveStylesService

Source: https://github.com/taiga-family/taiga-ui/wiki/TuiDirectiveStylesService

Use TuiDirectiveStylesService to inject styles into a directive. The service's addStyle method takes the style string and a component name (e.g., 'MyDirective') to associate the styles. This example shows a directive constructor that calls addStyle with a constant STYLE.

```typescript
const STYLE = '...';

@Directive({
  selector: '[selector]',
})
export class MyDirective {
  constructor(service: TuiDirectiveStylesService) {
    service.addStyle(STYLE, 'MyDirective');
  }
}
```

--------------------------------

### tuiDefaultProp decorator usage

Source: https://github.com/taiga-family/taiga-ui/wiki/Decorators

Decorator for @Input to prevent undefined values from passing through. Resets value to initial if undefined is passed, prints assertion error in Dev mode, and supports custom assertion. The example shows a volume assertion function and its usage with a default value.

```typescript
export function volumeAssertion(volume: number): boolean {
    return isFinite(volume) && volume >= 0 && volume <= 1;
}

...
@Input()
@tuiDefaultProp(volumeAssertion, 'volume can only change between 0 and 1')
volume = 1;
```

--------------------------------

### Bootstrap Angular app with Taiga UI and zoneless change detection

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/app/stackblitz/project-files/src/main.ts.md

Sets up the root component and bootstraps the application with Taiga UI providers. Includes a StackBlitz-specific workaround for assets and a custom 'Pythons' provider.

```TypeScript
import {provideRouter} from '@angular/router';
import {bootstrapApplication} from '@angular/platform-browser';
import {Component, provideZonelessChangeDetection} from '@angular/core';
import {provideTaiga, tuiAssetsPathProvider, TuiRoot} from '@taiga-ui/core';

import {App} from './app/app';

@Component({
  selector: 'root',
  imports: [App, TuiRoot],
  template: '<tui-root> <app/> </tui-root>',
})
class Root {}

bootstrapApplication(Root, {
  providers: [
    provideRouter([]),
    provideZonelessChangeDetection(),
    /**
     * A workaround for StackBlitz only (it does not support assets).
     * Don't use this approach in real-world applications!
     */
    tuiAssetsPathProvider('https://taiga-ui.dev/assets/taiga-ui/icons'),
    provideTaiga(),
    {
      provide: 'Pythons',
      useValue: ['John Cleese', 'Eric Idle', 'Michael Palin', 'Graham Chapman', 'Terry Gilliam', 'Terry Jones'],
    },
  ],
});
```

--------------------------------

### open<G>(content, options)

Source: https://github.com/taiga-family/taiga-ui/wiki/AbstractTuiDialogService

Public method to show a modal dialog using the service. It accepts dialog content and optional options, returning an Observable that emits the dialog result.

```APIDOC
## open<G>(content, options)

### Description
Opens a modal dialog with the given content and options. Returns an Observable that emits the result of the dialog interaction.

### Method
open

### Signature
```ts
open<G>(
    content: PolymorpheusContent<TuiBaseDialogContext<G> & T>,
    options: Partial<T> = {},
): Observable<G>
```

### Parameters
- **content** (PolymorpheusContent<TuiBaseDialogContext<G> & T>) - Required - The content to display in the dialog.
- **options** (Partial<T>) - Optional - Partial options to override default dialog settings.

### Returns
- **Observable<G>** - An Observable that emits the dialog result when closed.

### Usage Example
```ts
open<G>(
    content: PolymorpheusContent<TuiBaseDialogContext<G> & T>,
    options: Partial<T> = {},
): Observable<G>
```
```

--------------------------------

### Configure highlight options

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-doc/README.md

Set up syntax highlighting providers in your root component. The lineNumbersLoader is optional; include it only if you want line numbers.

```typescript
import {Component} from '@angular/core';
import {TuiDocMain} from '@taiga-ui/addon-doc';
import {provideHighlightOptions} from 'ngx-highlightjs';
import {App} from './app.component';

@Component({
  imports: [TuiDocMain],
  providers: [
    provideHighlightOptions({
      coreLibraryLoader: () => import('highlight.js/lib/core' as string),
      lineNumbersLoader: () => import('ngx-highlightjs/line-numbers' as string), // Optional, only if you want the line numbers
      languages: {
        typescript: () => import('highlight.js/lib/languages/typescript' as string),
        less: () => import('highlight.js/lib/languages/less' as string),
        xml: () => import('highlight.js/lib/languages/xml' as string),
      },
    }),
  ],
})
export class App {}
```

--------------------------------

### getScrollParent

Source: https://github.com/taiga-family/taiga-ui/wiki/DOM

Gets the closest parent element that has a scroll.

```APIDOC
## getScrollParent

### Description
Returns the nearest scrollable parent element.

### Parameters
- **element** (Element) - Required - The element to start from.

### Returns
- **Element | null** - The closest scrollable parent or null.

### Example
```typescript
import {getScrollParent} from '@taiga-ui/cdk';
const scrollParent = getScrollParent(element);
```
```

--------------------------------

### Public Properties

Source: https://github.com/taiga-family/taiga-ui/wiki/AbstractTuiInteractive

Public properties for managing hover, press, focus visibility, and id.

```APIDOC
## Public Properties

### hovered
- **Type**: boolean
- **Default**: `false`
- **Description**: Hovered state (managed by implementation).

### pressed
- **Type**: boolean
- **Default**: `false`
- **Description**: Pressed state (managed by implementation).

### focusVisible
- **Type**: boolean
- **Default**: `false`
- **Description**: Keyboard focus state (managed by implementation).

### id
- **Type**: string
- **Description**: Id falling back to auto-generated unique string if `nativeId` is not provided.
```

--------------------------------

### Outputs

Source: https://github.com/taiga-family/taiga-ui/wiki/AbstractTuiInteractive

Outputs that emit state changes for focus, press, hover, and focus visibility.

```APIDOC
## Outputs

### focusedChange
- **Type**: EventEmitter<boolean>
- **Description**: Emits when the focused state changes.

### pressedChange
- **Type**: EventEmitter<boolean>
- **Description**: Emits when the pressed state changes.

### hoveredChange
- **Type**: EventEmitter<boolean>
- **Description**: Emits when the hovered state changes.

### focusVisibleChange
- **Type**: EventEmitter<boolean>
- **Description**: Emits when the focus visible state changes.
```

--------------------------------

### Angular App Component with templateUrl and styleUrl

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/app/stackblitz/starter/files/app.ts.md

Defines the root App component for the Taiga UI starter project. Uses the 'app' selector and references './app.html' and './app.less' for template and styles.

```TypeScript
import {Component} from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: './app.html',
  styleUrl: './app.less',
})
export class App {}
```

--------------------------------

### Inject TUI_IS_ANDROID token in constructor

Source: https://github.com/taiga-family/taiga-ui/wiki/TUI_IS_ANDROID

Use this token to detect Android devices (mobile but not iOS). It depends on TUI_IS_MOBILE and TUI_IS_IOS tokens. Inject it in a constructor to get a boolean value.

```typescript
import {TUI_IS_ANDROID} from '@taiga-ui/cdk';

// ...
constructor(@Inject(TUI_IS_ANDROID) isAndroid: boolean) {}
// ...
```

--------------------------------

### Inputs

Source: https://github.com/taiga-family/taiga-ui/wiki/AbstractTuiInteractive

Inputs for configuring the interactive component's focus, hover, and pressed states.

```APIDOC
## Inputs

### focusable
- **Type**: boolean
- **Default**: `true`
- **Description**: Component is focusable with keyboard (managed by implementation).

### nativeId
- **Type**: string
- **Default**: `''`
- **Description**: Id for native attribute of main nested HTMLElement (managed by implementation).

### pseudoFocused
- **Type**: boolean | null
- **Default**: `null`
- **Description**: Forced focused state.

### pseudoHovered
- **Type**: boolean | null
- **Default**: `null`
- **Description**: Forced hovered state.

### pseudoPressed
- **Type**: boolean | null
- **Default**: `null`
- **Description**: Forced pressed state.
```

--------------------------------

### Inject TUI_IS_IOS token

Source: https://github.com/taiga-family/taiga-ui/wiki/TUI_IS_IOS

Use this token to detect iOS devices. It depends on TUI_IS_MOBILE and uses a regex to identify iOS when mobile is true. Inject it in a constructor to get a boolean value.

```typescript
import {TUI_IS_IOS} from '@taiga-ui/cdk';

// ...
constructor(@Inject(TUI_IS_IOS) isIos: boolean) {}
// ...
```

--------------------------------

### Inject TUI_IS_MOBILE token

Source: https://github.com/taiga-family/taiga-ui/wiki/TUI_IS_MOBILE

Use this token to detect mobile devices. It takes the USER_AGENT token and parses it with a complex Regex. Inject it in a constructor to get a boolean indicating if the user is on a mobile device.

```TypeScript
import {TUI_IS_MOBILE} from '@taiga-ui/cdk';

// ...
constructor(@Inject(TUI_IS_MOBILE) isMobile: boolean) {}
// ...
```

--------------------------------

### MyPortalHost component with tuiVCR and TuiPortalService provider

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/customization/portals/examples/setup/create-host.md

Defines a custom portal host component that uses the tuiVCR directive to render portals. It extends TuiPortals and provides MyPortalService via tuiProvide for TuiPortalService. Requires the TuiVCR import and a style file 'my-portal-host.style.less'.

```TypeScript
@Component({
  selector: 'my-portal-host',
  template: '<ng-container tuiVCR />',
  styleUrl: './my-portal-host.style.less',
  imports: [TuiVCR],
  providers: [tuiProvide(TuiPortalService, MyPortalService)],
})
export class MyPortalHost extends TuiPortals {}
```

--------------------------------

### add<C>(componentFactory, injector)

Source: https://github.com/taiga-family/taiga-ui/wiki/TuiPortalService

Adds a component to the portal, displaying it above all application content. Returns a ComponentRef for the created component.

```APIDOC
## add<C>(componentFactory: ComponentFactory<C>, injector: Injector): ComponentRef<C>

### Description
Adds a component to the portal, displaying it above all application content. Returns a ComponentRef for the created component.

### Method
add

### Parameters
- **componentFactory** (ComponentFactory<C>) - Required - The factory to create the component.
- **injector** (Injector) - Required - The injector to use for the component.

### Returns
ComponentRef<C> - The reference to the created component.
```

--------------------------------

### angular.json configuration

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/app/stackblitz/project-files/configs.md

Angular CLI workspace configuration for the demo application. Defines build and serve targets using the @angular/build builders, with a development configuration that disables license extraction, enables named chunks, disables optimization, and enables source maps. The build options specify the index, browser entry, output path, empty polyfills, styles, and TypeScript config.

```json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "newProjectRoot": "projects",
  "projects": {
    "demo": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "configurations": {
            "development": {
              "extractLicenses": false,
              "namedChunks": true,
              "optimization": false,
              "sourceMap": true
            }
          },
          "options": {
            "index": "src/index.html",
            "browser": "src/main.ts",
            "outputPath": "dist/demo",
            "polyfills": [],
            "styles": ["src/styles.less"],
            "tsConfig": "tsconfig.json"
          }
        },
        "serve": {
          "builder": "@angular/build:dev-server",
          "configurations": {
            "development": {
              "buildTarget": "demo:build:development"
            }
          },
          "defaultConfiguration": "development"
        }
      },
      "prefix": "app",
      "projectType": "application",
      "root": "",
      "schematics": {},
      "sourceRoot": "src"
    }
  },
  "version": 1
}
```

--------------------------------

### table[tuiTable]

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/table/index.html

Parent directive that sets up the table. It accepts an array of keys to set up column order, cells size, sort function, and direction for sorting.

```APIDOC
## [DIRECTIVE] table[tuiTable]

### Description
Parent directive that sets up the table. It accepts an array of keys to set up column order, cells size, sort function, and direction for sorting.

### Attributes
- **columns** (array of keys) - Required - An array of keys to set up columns order.
- **size** (string) - Optional - Cells size.
- **sort** (function) - Optional - Sort function (basic JavaScript array sort API).
- **direction** (string) - Optional - Direction for sorting.

```

--------------------------------

### thead[tuiThead]

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/table/index.html

Optionally used on `thead` to make it sticky.

```APIDOC
## [DIRECTIVE] thead[tuiThead]

### Description
Optionally used on `thead` to make it sticky.

```

--------------------------------

### addTemplate<C>(templateRef, context?)

Source: https://github.com/taiga-family/taiga-ui/wiki/TuiPortalService

Adds a template to the portal, displaying it above all application content. Returns an EmbeddedViewRef for the created view.

```APIDOC
## addTemplate<C>(templateRef: TemplateRef<C>, context?: C): EmbeddedViewRef<C>

### Description
Adds a template to the portal, displaying it above all application content. Returns an EmbeddedViewRef for the created view.

### Method
addTemplate

### Parameters
- **templateRef** (TemplateRef<C>) - Required - The template to add.
- **context** (C) - Optional - The context to pass to the template.

### Returns
EmbeddedViewRef<C> - The reference to the created embedded view.
```

--------------------------------

### Include TuiDocMain in template

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-doc/README.md

Add the main documentation component to your template. Content placed inside will appear below navigation in the sidebar.

```html
<tui-doc-main>You can add content here, it will be shown below navigation in the sidebar</tui-doc-main>
```

--------------------------------

### Configure routing

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-doc/README.md

Define routes for documentation pages. The title in route data is required for TUI_DOC_SEE_ALSO to work and is automatically added to TUI_DOC_TITLE for the browser tab.

```typescript
import {Routes} from '@angular/router';

const appRoutes: Routes = [
  {
    path: 'doc-page-1',
    loadComponent: async () => (await import('../doc-page-1')).DocPage,
    data: {
      title: 'Documentation page #1',
    },
  },
  // ...
];
```

--------------------------------

### Add Taiga UI MCP server to Claude Code

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/info/ai/mcp/snippets/mcp-claude-code.md

Registers the Taiga UI MCP server with Claude Code using the `claude mcp add` command. The server is launched via `npx` and points to the Taiga UI documentation source URL.

```bash
claude mcp add taiga-ui -- \
  npx -y @taiga-ui/mcp@latest --source-url=https://taiga-ui.dev/llms-full.txt
```

--------------------------------

### AbstractTuiControl Inputs

Source: https://github.com/taiga-family/taiga-ui/wiki/AbstractTuiControl

Inputs for configuring the custom control component.

```APIDOC
## Inputs

### readOnly
- **Type**: boolean
- **Default**: false
- **Description**: Sets the control to read-only mode.

### pseudoValidation
- **Type**: TuiValidation | null
- **Default**: null
- **Description**: Forces a validation status on the control.
```

--------------------------------

### tsconfig.json configuration

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/app/stackblitz/project-files/configs.md

TypeScript compiler configuration for the demo project. Enables strict mode, strict template checks, and ES2022 target/module. Sets useDefineForClassFields to false and includes DOM libs.

```json
{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": ["ES2022", "dom"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}
```

--------------------------------

### Using EMPTY_QUERY in a component

Source: https://github.com/taiga-family/taiga-ui/wiki/Empty-instances

Shows how to import and use EMPTY_QUERY as a default value for a @ContentChildren query. This avoids undefined or null when no content is projected.

```typescript
import {EMPTY_QUERY} from '@tinkoff-ui/angular-cdk';

// ...
@ContentChildren(TuiTabDirective)
private readonly tabs: QueryList<TuiTabDirective> = EMPTY_QUERY;
```

--------------------------------

### tbody[tuiTbody]

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/table/index.html

Sets up a group of data. You can have multiple `tbody` inside your table. It accepts data to display, optional heading content for the group that makes it collapsible, and open/collapsed state of the group.

```APIDOC
## [DIRECTIVE] tbody[tuiTbody]

### Description
Sets up a group of data. You can have multiple `tbody` inside your table. It accepts data to display, optional heading content for the group that makes it collapsible, and open/collapsed state of the group.

### Attributes
- **data** (array) - Required - Data to display.
- **heading** (string) - Optional - Optional heading content for the group that makes it collapsible.
- **open** (boolean) - Optional - Open/collapsed state of the group.

```

--------------------------------

### Abstract Properties

Source: https://github.com/taiga-family/taiga-ui/wiki/AbstractTuiInteractive

Abstract properties that must be implemented by subclasses.

```APIDOC
## Abstract Properties

### disabled
- **Type**: boolean
- **Description**: Indicates whether the component is disabled.

### focused
- **Type**: boolean
- **Description**: Typically a getter in implementation to check if component is focused.
```

--------------------------------

### *tuiHead="key"

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/table/index.html

Used to define template for heading for a particular key. Goes inside `tr[tuiThGroup]` element inside `thead`.

```APIDOC
## [DIRECTIVE] *tuiHead="key"

### Description
Used to define template for heading for a particular key. Goes inside `tr[tuiThGroup]` element inside `thead`.

```

--------------------------------

### floor

Source: https://github.com/taiga-family/taiga-ui/wiki/Math

Floors a number to the nearest integer, fixing common problems of the native implementation.

```APIDOC
## floor

### Description
Floors a number to the nearest integer, fixing common problems of the native implementation.

### Method
Function

### Signature
`floor(value: number): number`

### Parameters
- **value** (number) - Required - The number to floor.

### Returns
- **number** - The floored integer.
```

--------------------------------

### *tuiCell="key"

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/table/index.html

Used to define template for cell for a particular key. Goes inside `tr[tuiTr]` element.

```APIDOC
## [DIRECTIVE] *tuiCell="key"

### Description
Used to define template for cell for a particular key. Goes inside `tr[tuiTr]` element.

```

--------------------------------

### Using TuiResizeService in a directive

Source: https://github.com/taiga-family/taiga-ui/wiki/TuiResizeService

Provides TuiResizeService and TuiDestroyService in a directive, injects them, and subscribes to resize events until destroyed. Logs 'resized' on each resize.

```TypeScript
@Directive({
  selector: '[selector]',
  providers: [TuiDestroyService, TuiResizeService],
})
export class MyDirective {
  constructor(
    readonly resize$: TuiResizeService,
    readonly destroy$: TuiDestroyService,
  ) {
    resize$
      .pipe(takeUntil(destroy$))
      .subscribe(() => {
        console.log('resized');
      });
  }
}
```

--------------------------------

### Configure tuiLanguageSwitcher for lazy loading i18n languages

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/customization/i18n/dynamic.md

Use this provider in the app bootstrap to load Taiga UI language files on demand. The async function imports the language module from node_modules, but you can override the path to your own files. The webpack comments enable lazy loading and chunk naming.

```TypeScript
import {tuiLanguageSwitcher, TuiLanguageName} from '@taiga-ui/i18n';

bootstrapApplication(App, {
  providers: [
    // ...
    tuiLanguageSwitcher(
      /**
       * @note:
       * then the i18n language files will be loaded from node_modules
       */
      async (language: TuiLanguageName): Promise<unknown> =>
        import(
          /* webpackMode: "lazy" */
          /* webpackChunkName: "i18n-lazy-" */
          `@taiga-ui/i18n/languages/${language}`
          // also you can override the paths to your i18n language files
        ),
    ),
  ],
}).catch((err: unknown) => console.error(err));
```

--------------------------------

### Empty entity definitions

Source: https://github.com/taiga-family/taiga-ui/wiki/Empty-instances

Provides empty instances for common Angular and TypeScript types: EMPTY_QUERY, EMPTY_ARRAY, EMPTY_FUNCTION, and EMPTY_VALIDATOR. Use these to avoid null checks and simplify initialization.

```typescript
export const EMPTY_QUERY = new QueryList<any>();
export const EMPTY_ARRAY: [] = [];
export const EMPTY_FUNCTION: Function = () => {};
export const EMPTY_VALIDATOR: ValidatorFn = () => null;
```

--------------------------------

### remove<C>({hostView}: ComponentRef<C>)

Source: https://github.com/taiga-family/taiga-ui/wiki/TuiPortalService

Removes a component from the portal using its ComponentRef. The component is destroyed and removed from the portal.

```APIDOC
## remove<C>({hostView}: ComponentRef<C>)

### Description
Removes a component from the portal using its ComponentRef. The component is destroyed and removed from the portal.

### Method
remove

### Parameters
- **hostView** (ComponentRef<C>) - Required - The ComponentRef of the component to remove.
```

--------------------------------

### tr[tuiTr]

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/table/index.html

Used inside `tbody` to layout cells. Only necessary when using structural `*tuiCell` directives.

```APIDOC
## [DIRECTIVE] tr[tuiTr]

### Description
Used inside `tbody` to layout cells. Only necessary when using structural `*tuiCell` directives.

```

--------------------------------

### Import TuiMapperPipeModule and define mapper function

Source: https://github.com/taiga-family/taiga-ui/wiki/TuiMapperPipe

Import the TuiMapperPipeModule and add a pure mapping function to your component code. The mapper function takes an item and additional arguments, returning a new object.

```typescript
readonly mapper = (item, name: string) => {
  return {
    role: item.role,
    name,
  }
}

name = 'Alex';

raw = {
  role: 'Develper',
  enabled: true,
};
```

--------------------------------

### AbstractTuiControl Public Properties

Source: https://github.com/taiga-family/taiga-ui/wiki/AbstractTuiControl

Public properties for accessing control state and validation.

```APIDOC
## Public Properties

### control
- **Type**: AbstractControl | null
- **Description**: Returns the control instance behind the component.

### validation
- **Type**: TuiValidation
- **Description**: Returns the actual validation status.

### computedValidation
- **Type**: TuiValidation
- **Description**: Returns the validation status, taking `pseudoValidation` into account.

### value
- **Type**: T
- **Description**: Returns the typed control value.
```

--------------------------------

### Import and use isElementAtPoint

Source: https://github.com/taiga-family/taiga-ui/blob/main/projects/demo/src/pages/components/utils/dom/examples/import/import.md

Import the isElementAtPoint function from @taiga-ui/cdk and call it with an element and point coordinates to check if the element is at that point.

```TypeScript
import {isElementAtPoint} from '@taiga-ui/cdk';

//...
isAtPoint = isElementAtPoint(element, point.x, point.y);
//...
```

--------------------------------

### Computed Getters

Source: https://github.com/taiga-family/taiga-ui/wiki/AbstractTuiInteractive

Computed getters that take forced states and disabled state into account.

```APIDOC
## Computed Getters

### computedHovered
- **Type**: boolean
- **Description**: Computed hovered state considering forced states and disabled state.

### computedPressed
- **Type**: boolean
- **Description**: Computed pressed state considering forced states and disabled state.

### computedFocusable
- **Type**: boolean
- **Description**: Computed focusable state considering forced states and disabled state.

### computedFocused
- **Type**: boolean
- **Description**: Computed focused state considering forced states and disabled state.

### computedFocusVisible
- **Type**: boolean
- **Description**: Computed focus visible state considering forced states and disabled state.
```

--------------------------------

### getClipboardDataText

Source: https://github.com/taiga-family/taiga-ui/wiki/DOM

Returns text from the data of a clipboard event. Works in IE and Edge browsers as well.

```APIDOC
## getClipboardDataText

### Description
Extracts text from a clipboard event's data.

### Parameters
- **event** (ClipboardEvent) - Required - The clipboard event.

### Returns
- **string** - The text from the clipboard data.

### Example
```typescript
import {getClipboardDataText} from '@taiga-ui/cdk';
const text = getClipboardDataText(event);
```
```

--------------------------------

### isEdgeOlderThan

Source: https://github.com/taiga-family/taiga-ui/wiki/Browser

Checks if the User-Agent string indicates an Edge version older than a specified version.

```APIDOC
## isEdgeOlderThan

### Description
Checks if the User-Agent string indicates an Edge version older than a specified version.

### Method
Function

### Parameters
- **ua** (string) - Required - User-Agent string
- **version** (number) - Required - Version to compare against

### Return Value
- **boolean** - True if the User-Agent is Edge and its version is older than the specified version, false otherwise.
```

--------------------------------

### isEdge

Source: https://github.com/taiga-family/taiga-ui/wiki/Browser

Checks if the User-Agent string indicates Edge.

```APIDOC
## isEdge

### Description
Checks if the User-Agent string indicates Edge.

### Method
Function

### Parameters
- **ua** (string) - Required - User-Agent string

### Return Value
- **boolean** - True if the User-Agent is Edge, false otherwise.
```

--------------------------------

### Using isElementAtPoint

Source: https://github.com/taiga-family/taiga-ui/wiki/DOM

Checks whether a given point is inside an element. Import from '@taiga-ui/cdk' and pass the element and coordinates.

```typescript
import {isElementAtPoint} from '@taiga-ui/cdk';

// ...
isAtPoint = isElementAtPoint(element, point.x, point.y)
// ...
```

--------------------------------

### clamp

Source: https://github.com/taiga-family/taiga-ui/wiki/Math

Clamps a value between two inclusive limits.

```APIDOC
## clamp

### Description
Clamps a value between two inclusive limits.

### Method
Function

### Signature
`clamp(value: number, min: number, max: number): number`

### Parameters
- **value** (number) - Required - The value to clamp.
- **min** (number) - Required - The lower inclusive limit.
- **max** (number) - Required - The upper inclusive limit.

### Returns
- **number** - The clamped value.

### Usage Example
```typescript
import {clamp} from '@tinkoff-ui/angular-cdk';

// ...
clamped = clamp(value, min, max)
// ...
```
```

--------------------------------

### isFirefox

Source: https://github.com/taiga-family/taiga-ui/wiki/Browser

Checks if the User-Agent string indicates Firefox.

```APIDOC
## isFirefox

### Description
Checks if the User-Agent string indicates Firefox.

### Method
Function

### Parameters
- **ua** (string) - Required - User-Agent string

### Return Value
- **boolean** - True if the User-Agent is Firefox, false otherwise.
```
Tokens:
Raw