@ydgp/angular

Angular utilities for rendering Angular components and custom elements dynamically with typed inputs and event bindings.

Installation

npm install @ydgp/angular

The package expects Angular and @ydgp/core-types to be available as peer dependencies.

Exports

@ydgp/angular re-exports:

• All public types from @ydgp/core-types
• DynamicComponent
• DynamicWebcomponentComponent

Dynamic Angular Components

DynamicComponent renders a component type into a ViewContainerRef and wires inputs and outputs from a single config object.

import { Component, input, output } from '@angular/core';
import { DynamicComponent, ReactiveComponentDefinition } from '@ydgp/angular';

@Component({
  selector: 'demo-card',
  template: `<button (click)="selected.emit(title())">{{ title() }}</button>`,
})
export class DemoCardComponent {
  readonly title = input('');
  readonly selected = output<string>();
}

@Component({
  selector: 'demo-host',
  imports: [DynamicComponent],
  template: `<yf-dynamic [component]="card"></yf-dynamic>`,
})
export class DemoHostComponent {
  card: ReactiveComponentDefinition<DemoCardComponent> = {
    type: DemoCardComponent,
    inputs: {
      title: 'Open details',
    },
    outputListener: {
      selected: value => console.log(value),
    },
  };
}

Notes

• inputs is typed from input() signals on the target component.
• outputListener is typed from output() refs on the target component.
• Replacing the config clears the previous component instance and unsubscribes old output subscriptions.

Dynamic Web Components

DynamicWebcomponentComponent creates a custom element from a YfWebElement definition, assigns attributes or properties, and attaches event listeners.

import { Component } from '@angular/core';
import { Subject } from 'rxjs';
import {
  DynamicWebcomponentComponent,
  WebComponentDefinition,
  YfWebElement,
} from '@ydgp/angular';

class DemoElement extends HTMLElement {
  title = '';
}

@Component({
  selector: 'demo-web-host',
  imports: [DynamicWebcomponentComponent],
  template: `<yf-dynamic-webcomponent [webComponent]="definition"></yf-dynamic-webcomponent>`,
})
export class DemoWebHostComponent {
  readonly title$ = new Subject<string>();

  definition: WebComponentDefinition<
    { title: string },
    { ready: (value: string) => void }
  > = {
    type: new YfWebElement('demo-element', DemoElement),
    attributes: {
      title: this.title$,
    },
    eventListeners: {
      ready: value => console.log(value),
    },
  };
}

Notes

• webComponent is a required input signal.
• attributes accepts plain values or Observable values.
• Observable-backed attributes are unsubscribed automatically when the definition changes or the host is destroyed.
• Event listeners receive the detail value from dispatched CustomEvents.

Development

From the workspace root:

npm install
npm run build -- angular
npm test