CSV importer and spreadsheet editor for Angular

import {
  ChangeDetectionStrategy,
  Component,
  CUSTOM_ELEMENTS_SCHEMA,
  ElementRef,
  effect,
  viewChild,
} from "@angular/core";
import "@updog/data-editor-wc";
import type { UpdogEditorElement } from "@updog/data-editor-wc";

@Component({
  selector: "app-importer",
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <button type="button" (click)="open()">Open Importer</button>
    <updog-editor #editor></updog-editor>
  `,
})
export class ImporterComponent {
  protected readonly columns = [
    { id: "name", title: "Name" },
    {
      id: "passport",
      title: "Passport",
      validators: [{ type: "required", message: "Passport is required" }],
    },
  ];

  private readonly editorRef =
    viewChild.required<ElementRef<UpdogEditorElement>>("editor");

  constructor() {
    effect((onCleanup) => {
      const el = this.editorRef().nativeElement;
      el.configure({
        apiKey: "YOUR_API_KEY",
        columns: this.columns,
        primaryKey: "passport",
        onComplete: (result) => {
          console.log(result);
          el.hide();
        },
      });
      const onClose = () => el.hide();
      el.addEventListener("close", onClose);
      onCleanup(() => el.removeEventListener("close", onClose));
    });
  }

  open(): void {
    this.editorRef().nativeElement.show();
  }
}

// Add "@updog/data-editor-wc/styles.css" to the "styles" array in angular.json.