Skip to content
Voidable

Angular

The Angular adapter provides VoidableModule to register CUSTOM_ELEMENTS_SCHEMA and a ThemeService with Angular signals.

Install

Section titled “Install”
Terminal window
npm install @voidable/ui @voidable/theme @voidable/ui-angular

Standalone setup

Section titled “Standalone setup”

Angular 18+ defaults to standalone components. Add CUSTOM_ELEMENTS_SCHEMA directly to each component that uses <void-*> elements:

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


@Component({
  selector: 'app-root',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  standalone: true,
  template: `
    <void-button variant="filled" (void-click)="onSave()">Save</void-button>
    <void-input [value]="name" (void-change)="name = $event.detail.value"></void-input>
    <void-alert color="info">Angular works with custom elements natively.</void-alert>
  `,
})
export class AppComponent {
  name = '';
  onSave() {}
}

Module-based setup

Section titled “Module-based setup”

For NgModule-based apps, import VoidableModule once in your app module:

import { VoidableModule } from '@voidable/ui-angular';


@NgModule({
  imports: [VoidableModule],
})
export class AppModule {}

VoidableModule registers CUSTOM_ELEMENTS_SCHEMA so Angular does not reject unknown <void-*> tags. All components in the module can then use <void-*> elements in their templates.

ThemeService

Section titled “ThemeService”

ThemeService is provided in root via providedIn: 'root' — no module import needed. Inject it anywhere in your app:

import { Component } from '@angular/core';
import { ThemeService } from '@voidable/ui-angular';


@Component({
  selector: 'app-root',
  template: `<span>Current theme: {{ themeService.theme() }}</span>`,
})
export class AppComponent {
  constructor(public themeService: ThemeService) {}
}

ThemeService uses a MutationObserver to track the data-theme attribute on <html> and exposes a signal<'dark' | 'light'>.