Recipe

Angular integration

Create capsule instances in ngAfterViewInit and destroy them in ngOnDestroy to avoid leaks.

Host component

dropdown-host.component.ts

import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
import { UI } from "tiny-engine-core";

@Component({
  selector: "app-dropdown-host",
  template: `
    <div #host>
      <button ref="trigger">Toggle</button>
      <div ref="menu" hidden>Angular + tiny-engine capsule</div>
    </div>
  `,
})
export class DropdownHostComponent implements AfterViewInit, OnDestroy {
  @ViewChild("host", { static: true }) host!: ElementRef<HTMLElement>;
  private instance: any;

  ngAfterViewInit(): void {
    this.instance = UI.getOrCreate(this.host.nativeElement, "dropdown", { open: false });
  }

  ngOnDestroy(): void {
    this.instance?.destroy();
  }
}

Bootstrap

main.ts

import { bootstrapApplication } from "@angular/platform-browser";
import { UI } from "tiny-engine-core";
import Dropdown from "./dropdown";
import { AppComponent } from "./app/app.component";

UI.register("dropdown", Dropdown);

bootstrapApplication(AppComponent);