Luzmo Lucero Design System - Angular Wrappers

Standalone Angular wrapper components for Lucero web components

This package provides Angular wrappers for the Luzmo Lucero Design System web components.

Installation

npm install @luzmo/ngx-lucero @luzmo/lucero @angular/core @angular/forms

Requirements

• Angular >= 17.3 (the wrappers use the functional output() API).
• The peer package @luzmo/lucero provides the underlying custom-element classes that the wrappers register at import time.

Usage

import { Component } from '@angular/core';
import { LuzmoButton } from '@luzmo/ngx-lucero';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LuzmoButton],
  template: `<luzmo-button>Click me</luzmo-button>`
})
export class AppComponent {}

The wrapper class name mirrors the host element (LuzmoButton); the underlying HTMLElement subclass type is re-exported as LuzmoButtonElement for @ViewChild / ElementRef<T> use cases.

Router links

Angular 20 and newer recognize Lucero components with an href property as link-compatible custom elements. Import RouterLink and apply it directly to the Lucero component:

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { LuzmoActionButton } from '@luzmo/ngx-lucero';

@Component({
  selector: 'app-settings-link',
  standalone: true,
  imports: [LuzmoActionButton, RouterLink],
  template: `
    <luzmo-action-button routerLink="/settings">
      Settings
    </luzmo-action-button>
  `
})
export class SettingsLinkComponent {}

RouterLink writes the resolved href, handles the click with the Angular router, and prevents a full page refresh. The component forwards exactly one click event per activation, so the router navigates once.

Because activation is proxied through an anchor inside the component's shadow root, the button does not expose native link affordances: modified clicks (Cmd/Ctrl/Shift) and Open link in new tab from the context menu are not available. Use a plain <a> where those matter.

Angular 17–19 do not recognize custom elements as anchor-like. On those versions, use routerLink without a separate href for client-side navigation, or upgrade to Angular 20+ when native link behavior is required.

Notes

• This package depends on @luzmo/lucero for the underlying custom elements.
• Keep this file under wrappers/angular/package/ to customize published README content.