Usage with Angular

To use Flowable Forms in an Angular application we will use the render function exported in the Forms bundle as in this example:

import {
  Component,
  OnDestroy,
  Input,
  ViewChild,
  AfterViewInit,
  ElementRef,
  EventEmitter,
  Output,
} from '@angular/core';
import { render, Model, destroy, Form } from '@flowable/forms';

@Component({
  selector: 'app-flwform',
  template: '<div #el></div>',
  styleUrls: ['./flwform.component.css'],
})
export class FlwformComponent implements AfterViewInit, OnDestroy {
  @Input() props: Model.CommonFormProps;
  @Input() payload: Model.Payload = {};
  @Output() payloadChange = new EventEmitter<Model.Payload>();
  @ViewChild('el', {read: ElementRef}) el: ElementRef;
  private form: Form | null = null;
  private destroy: () => void | null = null;

  constructor() {}

  ngAfterViewInit(): void {
    const { form, destroy } = render(this.el.nativeElement, {
      ...this.props,
      payload: this.payload,
      onChange: (p: Model.Payload) => {
        this.payload = p;
        this.payloadChange.emit(p);
      },
    });

    form.then(form => (this.form = form));
    this.destroy = destroy;
  }

  ngOnDestroy(): void {
    try {
      destroy(this.el.nativeElement);
    } catch (error) {
      console.error(error)
      // Handle error if needed
    }
  }
}

You can try it in this example project.