@zurich/angular-components

About

@zurich/angular-components provides Angular-specific wrappers for ZDS Web Components. These wrappers offer proper Angular integration with two-way binding, form control support, and TypeScript definitions.

Features

• Angular integration: Proper Angular bindings for all ZDS components
• Form support: Works with Angular Reactive Forms and Template-driven forms
• Two-way binding: Full [(ngModel)] support
• TypeScript: Complete type definitions
• Standalone mode: No external CDN required (v0.8.0+)

Installation

npm install @zurich/angular-components

Usage

Standalone Components (Angular 17+)

All components are Angular standalone components with the Za prefix:

// app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ZaButton, ZaTextInput } from '@zurich/angular-components';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ZaButton, ZaTextInput],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <za-text-input [(ngModel)]="name" label="Name"></za-text-input>
    <za-button (click)="submit()">Submit</za-button>
  `
})
export class AppComponent {
  name = '';
  submit() { console.log(this.name); }
}

Styles

Import the required styles in your angular.json or main styles file:

// styles.scss
@import '@zurich/design-tokens/dist/index.css';

Available Components

All ZDS components are available with the za- prefix in templates:

• za-button, za-badge, za-tag, za-icon
• za-text-input, za-select, za-checkbox, za-radio-select
• za-card, za-alert, za-modal, za-tooltip
• And many more...

Import the corresponding Za prefixed class (e.g., ZaButton, ZaTextInput).

ZDS Ecosystem

This package is part of the Zurich Design System (ZDS):

• @zurich/design-tokens
• @zurich/css-components
• @zurich/web-components
• @zurich/angular-components
• @zurich/dev-utils

License

Made with 💙 by Pablo Pérez Chueca and Traian Constantin Dida for Zurich Insurance Company.