Angular

The widget is an Angular library. In an Angular (or Analog) host you get two honest options — pick one and don’t mix them up.

Mode	Tag	When to use
Custom element	`<mildport-import>`	Same contract as React / Vue / HTML — attributes, properties, DOM events
Angular component	`<mildport>`	You already import the library as a component and want native bindings

import { CUSTOM_ELEMENTS_SCHEMA, Component, inject, OnInit } from '@angular/core';
import { defineImportSuiteElement } from '@capitality-io/mildport-widget';

@Component({
  selector: 'app-import',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <mildport-import
      [attr.api-base-url]="apiBaseUrl"
      [attr.license-key]="licenseKey"
    ></mildport-import>
  `,
})
export class ImportPage implements OnInit {
  apiBaseUrl = 'https://imports.your-infra.example';
  licenseKey = '…';

  async ngOnInit() {
    await defineImportSuiteElement();
    const el = document.querySelector('mildport-import');
    if (!el) return;
    el.targets = [
      {
        id: 'contact',
        label: 'Contact',
        fields: [{ key: 'person.email', label: 'Email', required: true, columnType: 'email' }],
      },
    ];
    el.addEventListener('import-applied', (e: Event) => {
      console.log((e as CustomEvent).detail.recordId);
    });
  }
}

Object catalogs still go on the element as properties (not attributes) — same rule as every other host.

Angular component

Import ImportSuiteWizard and use the component selector <mildport>:

import { Component } from '@angular/core';
import { ImportSuiteWizard, type TargetCatalog } from '@capitality-io/mildport-widget';

@Component({
  selector: 'app-import',
  standalone: true,
  imports: [ImportSuiteWizard],
  template: `
    <mildport
      [apiBaseUrl]="apiBaseUrl"
      [licenseKey]="licenseKey"
      [targets]="targets"
      (import-applied)="onApplied($event)"
    />
  `,
})
export class ImportPage {
  apiBaseUrl = 'https://imports.your-infra.example';
  licenseKey = '…';
  targets: TargetCatalog = [
    {
      id: 'contact',
      label: 'Contact',
      fields: [{ key: 'person.email', label: 'Email', required: true, columnType: 'email' }],
    },
  ];

  onApplied(e: CustomEvent) {
    console.log(e.detail.recordId);
  }
}

No Analog linker step — Angular CLI and Analog already link partial-compiled libraries.

Suite : Configurer · Événements · tous les frameworks