DocumentationAll ComponentsContact usChangelog
IntroductionAccessBug Reports and Feature RequestsContactInstallationAngularReactUsageCustom Elements MCPVirtual ScrollingBlackduckPortalsData FormatsMobile and TouchFormsDepth levels and stacking contextsTool IntegrationHow to use SkeletonsZui AngularMicrofrontends

Themes and Customization

ThemesCSS custom propertiesBuild Time ThemingFontsTool SupportMigrationguide and DeprecationsV3 to V4V2 to V3V1 to V2

Known Issues and Workarounds

Combobox initially open menu width not alignedSetting tabindex on disabled componentsTemplating into default SlotsTruncation limitation in title stackPopover position in small iframesStorybook problemsBrowser bugsFlex layout subsampling issueDead Keys in NumberInputsInteractive icon hitarea

ZUi Angular Library

The @zeiss/zui-angular package is an Angular library that provides two lightweight standalone directives to use ZUi Web Components and ZUi Icons in Angular templates without requiring CUSTOM_ELEMENTS_SCHEMA.

Angular Version Support

This library currently requires Angular 20 and is maintained exclusively for the current Angular LTS version. When a new Angular LTS version is released, this library will be upgraded accordingly - not immediately, but with the next ZUi package release.

Note: A separate @zeiss/zui-angular-v package is also available. It provides the same directives via version-prefixed import paths (e.g., @zeiss/zui-angular-v/major or @zeiss/zui-angular-v/minor), making it suitable for use with ZUi major/minor versions in Angular standalone components. Currently there are no differences between the major and minor directives, but this will change in the future when the directives are extended to handle version-specific events and properties.

Table of Contents

Installation

npm install @zeiss/zui-angular

Setup

In NgModule Applications

Import the directives in your module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ZuiElementDirective, ZuiIconDirective } from '@zeiss/zui-angular';
import { AppComponent } from './app.component';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, ZuiElementDirective, ZuiIconDirective],
bootstrap: [AppComponent],
})

export class AppModule {}

In Standalone Components

Import the directives in your component:

import { Component } from '@angular/core';
import { ZuiElementDirective, ZuiIconDirective } from '@zeiss/zui-angular'; 

@Component({
selector: 'app-example',
standalone: true,
templateUrl: './example.component.html',
imports: [ZuiElementDirective, ZuiIconDirective],
})

export class ExampleComponent {}

Directives

ZuiElementDirective

Selector: [zui-element]

Marks ZUi component elements (like <zui-button>, <zui-select>, etc.) as known elements, eliminating the need for CUSTOM_ELEMENTS_SCHEMA. Provides tag recognition for all ZUi Web Components.

ZuiIconDirective

Selector: [zui-icon]

Marks ZUi icon elements (like <zui-icon-save>, <zui-icon-common-holy-placeholder>, etc.) as known elements, eliminating the need for CUSTOM_ELEMENTS_SCHEMA. Provides tag recognition for all ZUi icon components.

Template Usage

Once directives are imported, use them in your templates with ZUi Web Components and icons.

Basic ZUi Components

<zui-box header-text="Form Example" zui-element>
<zui-textfield placeholder="Enter name" zui-element></zui-textfield>
<zui-button (click)="submit()" emphasis="active" zui-element>
Submit
</zui-button>
</zui-box>

ZUi Icons

<zui-icon-common-holy-placeholder size="s16" zui-icon></zui-icon-common-holy-placeholder>