@eonui/angular

@eonui/angular is the Angular integration helper package for EonUI custom elements. It currently focuses on registration guidance, event naming, SSR notes, and starter examples for wiring EonUI elements into Angular applications without pretending to be a full component-wrapper library yet.

Workspace Note

This folder currently documents the published package surface. The implementation source for @eonui/angular is not mirrored into revamp/eonui/packages/angular yet, so this README is the local documentation home for the package.

Docs And Live Reference

Use this README for Angular-specific setup, event wiring, and package behavior. For broader EonUI product examples, visual patterns, and ecosystem context, refer to https://eonui.com.

Purpose

Use this package when you need:

• Angular-specific guidance for EonUI custom elements
• event mapping reminders for form controls and pagination
• SSR-safe setup notes
• starter snippets for Angular templates that consume Eon elements directly

What The Package Exposes Today

The current package exports:

• provideEonAngular
• ensureEonAngular()
• angularIntegrationGuide
• angularUsageExample
• angularFormExample

This is an intentionally thin layer today. It is better thought of as an integration companion than a full Angular wrapper package.

Install

npm install @eonui/angular

Recommended Adoption Flow

Most Angular teams get the best results with this sequence:

1. review angularIntegrationGuide so the project uses the intended setup model
2. enable CUSTOM_ELEMENTS_SCHEMA in the Angular surface that renders Eon elements
3. register the runtime once at application startup or in a client-safe bootstrap path
4. bind Eon custom events into component state with eonInput, eonChange, and related handlers
5. standardize a few internal wrapper components if the app needs stricter form or layout conventions

This package is a good fit when you want Angular to consume EonUI without rebuilding the core components as native Angular components first.

Example 1: Review the integration guide programmatically

import { angularIntegrationGuide } from '@eonui/angular';

console.log(angularIntegrationGuide.registration);
console.log(angularIntegrationGuide.events);
console.log(angularIntegrationGuide.ssr);

Use this when:

• generating docs pages
• surfacing framework guidance inside internal tooling
• validating event naming conventions for Angular consumers

Example 2: Enable custom elements in Angular

The package ships a registration snippet through provideEonAngular.

import { provideEonAngular } from '@eonui/angular';

console.log(provideEonAngular);

Typical shape:

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

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class EonElementsModule {}

Use this when:

• enabling Eon custom elements in Angular templates
• documenting integration steps for app teams
• starting a lightweight Angular bridge before deeper wrappers exist

Example 3: Consume Eon elements in an Angular component

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

@Component({
  selector: 'app-dashboard',
  template: `
    <eon-section heading="Revenue">
      <eon-toolbar slot="actions">
        <eon-button>Export</eon-button>
      </eon-toolbar>
      <eon-card>
        <eon-pagination [page]="1" [total]="12"></eon-pagination>
      </eon-card>
    </eon-section>
  `
})
export class DashboardComponent {}

Use this when:

• building Angular screens with the underlying Eon custom elements
• prototyping quickly before full wrappers exist
• validating event and slot behavior in Angular templates

Example 4: Handle Eon form events in Angular

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

@Component({
  selector: 'app-profile-form',
  template: `
    <eon-section heading="Profile form">
      <eon-input
        label="Email"
        [value]="email"
        help-text="We use this for transactional notices."
        (eonInput)="email = $event.detail.value">
      </eon-input>

      <eon-combobox
        label="Role"
        options="Admin,Editor,Viewer"
        (eonChange)="role = $event.detail.value">
      </eon-combobox>

      <eon-button>Submit</eon-button>
    </eon-section>
  `
})
export class ProfileFormComponent {
  email = '';
  role = 'Viewer';
}

Use this when:

• bridging custom events into Angular state
• documenting form patterns for consumers
• building lightweight ControlValueAccessor adapters later

Troubleshooting

• If Angular reports unknown elements, confirm CUSTOM_ELEMENTS_SCHEMA is applied in the right standalone component or module.
• If events appear not to fire, verify you are listening for the actual custom event names such as eonInput or eonChange, not native DOM substitutes.
• If SSR pages fail during startup, move registration into a browser-only path and keep server rendering free of custom-element upgrade assumptions.
• If teams want strongly Angular-shaped APIs, create thin app-level facades while the upstream package remains close to the web-component surface.

Where This Package Fits

@eonui/angular sits on top of:

• @eonui/core for the actual custom elements
• @eonui/manifest for documented component behavior
• @eonui/icons when app screens need token-driven icon usage

Current Limitations

• it is not a full Angular component wrapper library yet
• there are no first-class Angular directives or CVA adapters in the current package surface
• registration is still largely custom-element oriented

Future Prospects

The most valuable next steps are:

• real Angular standalone wrappers around commonly used Eon elements
• ControlValueAccessor adapters for form inputs
• SSR and hydration utilities
• typed event adapters for common Eon controls
• Angular-specific examples for charts, dialogs, and complex data-entry flows