Angular components

Prod:

Stage:

The @zurich/angular-components NPM package is a package that uses JavaScript and CSS. The components are developed using Lit in the @zurich/angular-components package and then wrapped to be easily used with Angular, making sure that the capabilities and features the framework are fully functional.

Disclaimer

Read first the @zurich/design-tokens installation guide since this package depends on that one.

Install

We need to locally install the package using NPM:

npm i -D @zurich/angular-components

Installation

For the WebComponent integration with Angular we use Angular 17 due to major improvements done that make things easier.

Check first that you have installed also the design tokens and add the "node_modules/@zurich/web-components/dist/styles.css" import in the styles.

Then, the component of module must import the corresponding component, in this case we use ZaIcon as an example:

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "styles": [
            "node_modules/@zurich/web-components/dist/styles.css",  
          ],
        },
      },
    }
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

app/app.component.ts

import '@angular/compiler';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

import { ZaIcon } from '@zurich/angular-components/angular';  

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, ZaIcon],  
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
}

app/app.component.html

<za-icon icon="close:line"></za-icon>