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 { mountSidebar } from "nav-schema";

@Component({ selector: "app-sidebar-nav", template: "<aside #host></aside>" })
export class SidebarNavComponent implements AfterViewInit, OnDestroy {
  @ViewChild("host", { static: true }) host!: ElementRef<HTMLElement>;
  private dispose = () => {};
  ngAfterViewInit() { this.dispose = mountSidebar(this.host.nativeElement, { schema }); }
  ngOnDestroy() { this.dispose(); }
}

Bootstrap

main.ts

import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent);