Angular

Peer dependencies

Both @angular/core and @angular/forms are peer dependencies which means they must be installed before iX.

"peerDependencies": {
  "@angular/core": ">=18.2.13",
  "@angular/forms": ">=18.2.13",
}

Library installation

Install @siemens/ix, @siemens/ix-angular and @siemens/ix-icons using a package manager:

NPM

npm install @siemens/ix @siemens/ix-angular @siemens/ix-icons

Yarn

yarn add @siemens/ix @siemens/ix-angular @siemens/ix-icons

PNPM

pnpm add @siemens/ix @siemens/ix-angular @siemens/ix-icons

Import styles

Import the design system styling in your global stylesheet (e.g.: src/styles.scss):

@import '@siemens/ix/dist/siemens-ix/siemens-ix.css';

Standalone setup

Standalone setup is a little different to module setup. Instead of importing the IxModule in your module file, iX components and necessary directives are directly imported from @siemens/ix-angular/standalone in your component file.

import { Component } from '@angular/core';
import { IxButton, IxDropdown, IxDropdownItem, IxDropdownTriggerDirective } from '@siemens/ix-angular/standalone';

@Component({
  standalone: true,
  selector: 'standalone-example',
  imports: [IxButton, IxDropdown, IxDropdownItem, IxDropdownTriggerDirective],
  template: `
    <ix-button #trigger>Open</ix-button>
    <ix-dropdown [ixDropdownTrigger]="trigger">
      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
      <ix-dropdown-item label="Item 3"></ix-dropdown-item>
      <ix-dropdown-item label="Item 4"></ix-dropdown-item>
      <ix-dropdown-item label="Item 5"></ix-dropdown-item>
    </ix-dropdown>
  `,
})
export default class StandaloneExample {}

info

When using iX form components in an Angular standalone setup, we recommend importing the appropriate value accessor directives from @siemens/ix-angular/standalone and include them in your component’s imports array (refer to preview examples). This prevents No value accessor errors.

Available value accessors:

• IxTextValueAccessorDirective - For ix-input, ix-number-input, ix-textarea
• IxSelectValueAccessorDirective - For ix-select
• IxRadioValueAccessorDirective - For ix-radio
• IxBooleanValueAccessorDirective - For ix-checkbox, ix-toggle
• IxDateValueAccessorDirective - For ix-date-input
• IxTimeValueAccessorDirective - For ix-time-input

Module setup (legacy)

Import IxModule and BrowserAnimationsModule (in some cases also the RouterModule.forRoot([/** your routes **/])) in your application module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IxModule } from '@siemens/ix-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, IxModule.forRoot(), BrowserAnimationsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}