Angular

Angular has good support for web components. To setup ZUi Web, see the Installation page and copy the setup code to your main.ts file.

We need to tell Angular to allow custom element tags in templates.

For standalone Angular apps add CUSTOM_ELEMENTS_SCHEMA to the imports in app.component.ts

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

Since Angular version 17 standalone is the default, this can be disabled by adding the corresponding parameter when creating the app. With standalone disabled or older Angular versions add CUSTOM_ELEMENTS_SCHEMA to the imports in app.module.ts:

import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

and add it as schema:

@NgModule({
  declarations: [
    AppComponent,
    MainComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})

Event types

To get event type you can use GetZuiEvent helper. Depending on the use case you might need to cast it first:

<zui-menubar
        emphasis="active-primary"
        expandable
        variant="primary"
        (zui-menubar-selected)="handleMenubarChange($any($event))">
...

or

<zui-menubar
        emphasis="active-primary"
        expandable
        variant="primary"
        (zui-menubar-selected)="handleMenubarChange">
...

function handleMenubarChange(event: GetZuiEvent<Menubar, 'SelectedEvent'>): void {
    console.log(event.detail.value)
}

Angular Example App

There is a small example app that uses ZUi-Web components in Angular. In this app, components are used in combination with each other and not each one separately as in the storybook. The goal is, among other things, to spot bugs resulting from the interaction of components, which is hard or impossible to find when looking at components in isolation. In addition, the example app gives you an idea of how to integrate ZUi Web in Angular. The application doesn't implement a real world use-case but is just a showcase without specific logic.

The angular example app is part of the mono-repo of ZUi web.

To access the repository you need access to our Azure DevOps project, which is the same access as to our ZUi public issue board. If you do not have access rights yet please contact us.