Elena + Angular Example

A minimal example demonstrating how to use Elena web components (@elenajs/core) inside an Angular 19 application.

What is Elena?

Elena is a lightweight (2kB) library for building Progressive Web Components that work natively in the browser. This example uses both @elenajs/core and @elenajs/components, an example component library built on top of Elena.

What This Example Demonstrates

All examples live in src/app/app.component.html and cover:

• Variants: default, primary, and danger button styles
• Interactive counter: Angular signals (signal()) driving Elena button click handlers
• Dynamic attribute binding: cycling through variants reactively via [attr.variant] bindings

Prerequisites

• Node.js v20+
• pnpm v10+

Getting Started

# Install dependencies
pnpm install

# Start the development server
pnpm start

Open http://localhost:4200 in your browser.

Available Scripts

Command	Description
pnpm start	Start the Angular dev server
pnpm build	Build for production
pnpm preview	Preview the production build locally

Project Structure

src/
├── main.ts                   # Angular entry point (bootstraps AppComponent)
├── index.html                # HTML shell
├── styles.css                # Global styles
├── elena.d.ts                # TypeScript declarations for Elena elements
└── app/
    ├── app.component.ts      # Root component, imports elements, manages state
    ├── app.component.html    # Template, all Elena examples live here
    └── app.component.css     # Component styles
angular.json                  # Angular CLI workspace config
tsconfig.json                 # TypeScript configuration
tsconfig.app.json             # App-specific TypeScript configuration

How Elena Web Components Are Used

Import the element and its styles in the component, add CUSTOM_ELEMENTS_SCHEMA to the schemas array, then use it as a regular template tag:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@elenajs/components/dist/button.js"; // registers <elena-button>
import "@elenajs/components/dist/button.css"; // button styles

@Component({
  selector: "app-root",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: ` <elena-button variant="primary" text="Click me" (click)="onClick()"></elena-button> `,
})
export class AppComponent {
  onClick() {
    console.log("clicked!");
  }
}

CUSTOM_ELEMENTS_SCHEMA tells Angular's template compiler to accept unknown element names (like elena-button) without errors.

Angular-Specific Patterns

Concept	Syntax
Event binding	(click)="handler()"
Dynamic attribute	[attr.variant]="value"
Reactive state	signal() from @angular/core
Read signal	{{ count() }}
Update signal	count.set(newValue)

TypeScript Support

Angular uses CUSTOM_ELEMENTS_SCHEMA (set in src/app/app.component.ts) to allow custom elements in templates. This bypasses Angular's template type-checker for unknown elements, so no additional type declarations are needed.