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 {}

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 {}