Angular component

The builder Angular component allows to use the builder in Angular applications with ease. To use the component, simply import TripettoBuilderModule from the package and feed it to your application's @NgModule imports array. This makes the <tripetto-builder> selector available in your application. Below is a list of inputs and outputs that can be used on the selector.

tip

Read the Angular implementation guide for more information and examples.

info

The Angular component is located in a subfolder named angular inside the builder package. Make sure to import the module and component from this folder.

Module

import { TripettoBuilderModule } from "@tripetto/builder/angular";

Component

import { TripettoBuilderComponent } from "@tripetto/builder/angular";

Selector

<tripetto-builder></tripetto-builder>

⏬ Inputs

Name	Type	Optional	Description
definition	IDefinition	Yes	Specifies the form definition to load (when omitted an empty form is loaded).
fonts	string | "inherit"	Yes	Specifies the path to the folder with the font files (more information).
locale	L10n.ILocale	Yes	Specifies the locale data for the builder (more information).
translations	L10n.TTranslation | L10n.TTranslation[]	Yes	Specifies the translations for the builder and blocks (more information).
namespace	{...}	Yes	Specifies a block namespace object to use or load (more information).
tier	IBuilderTier	Yes	Specifies a tier for the builder (more information).
license	string	Yes	Specifies a license code for the builder (more information).
zoom	"1:1" | "fit" | "fit-horizontal" | "fit-vertical"	Yes	Specifies the initial zoom state for the builder (more information).
centering	boolean	Yes	Specifies if the content in the builder is centered instead of left-aligned (default is true).
controls	boolean	Yes	Specifies the location of the navigation and zoombar (default is right).
rubberBandEffect	boolean	Yes	Specifies if the rubber band effect (also known as the elastic overscrolling effect) is enabled for the builder (more information).
disableResizing	boolean	Yes	Disables automatic resizing when the dimensions of the HTML element that holds the builder are changed (more information).
disablePrologue	boolean	Yes	Specifies if the prologue feature should be disabled (more information).
disableEpilogue	boolean	Yes	Specifies if the epilogue feature should be disabled (more information).
disableNesting	boolean	Yes	Specifies if creating new nested branches (subforms) should be disabled.
disableZoombar	boolean	Yes	Disables the visual zoombar that is shown when the form exceeds the size of the builder viewport.
disableLogo	boolean	Yes	Disables the Tripetto logo in the navigation bar.
disableSaveButton	boolean	Yes	Disables the save button in the navigation bar.
disableRestoreButton	boolean	Yes	Disables the restore button in the navigation bar (more information).
disableClearButton	boolean	Yes	Disables the clear button in the navigation bar (more information).
disableEditButton	boolean	Yes	Disables the edit button in the navigation bar (more information).
disableCloseButton	boolean	Yes	Disables the close button in the navigation bar (more information).
disableTutorialButton	boolean	Yes	Disables the tutorial button in the navigation bar.
disableOpenCloseAnimation	boolean	Yes	Disables the open and close animation of the builder.
showTutorial	boolean	Yes	Shows the tutorial dialog on startup.
previewURL	string	Yes	Specifies the URL of a preview page (more information).
supportURL	string | false	Yes	Specifies an URL to a custom help or support page or supply false to disable this button.
helpTopics	{...}	Yes	Specifies URLs to help topics and enables assistive buttons/links in the builder (more information).
nestedFormMode	boolean	Yes	Specifies if the builder should run in nested form mode (more information).
disableFormAbort	boolean	Yes	Disables the possibility to abort the whole form in nested forms (more information).
disableCreateEmptyForm	boolean	Yes	Disables the possibility to create new (empty) nested forms.
disableConvertToForm	boolean	Yes	Disables the possibility to convert sections into nested forms or vice-versa.
disableMoveToForm	boolean	Yes	Disables the possibility to move sections to existing nested forms.
onMenu	Function	Yes	Invoked when the context menu of a node, section, branch, or condition is requested (more information).
onOpenForm	Function	Yes	Invoked when the builder wants to open a subform for editing (more information).
onListForms	Function	Yes	Invoked when the builder needs the list of forms that can be used as subform (more information).
onBrowseForms	Function	Yes	Invoked when the builder wants to browse for a subform (more information).
browseFormsLabel	string	Yes	Specifies an alternative label for the browse forms feature (more information).
onLoadForm	Function	Yes	Invoked when the builder wants to load a certain subform (more information).
onUpdateForm	Function	Yes	Invoked when the builder wants to know if there is an update available for a certain form (more information).
onSaveForm	Function	Yes	Invoked when the builder wants to save a subform (more information).
saveFormLabel	string	Yes	Specifies an alternative label for the save form feature (more information).
onBreadcrumb	Function	Yes	Invoked everytime when a nested subform is opened or closed in the builder (more information).

📢 Outputs

Name	Type	Optional	Description
onLoad	EventEmitter<Builder>	Yes	Invoked when the builder is loaded (more information).
onError	EventEmitter<{...}>	Yes	Invoked when the builder is loaded (more information).
onReady	EventEmitter<Builder>	Yes	Invoked when the builder is ready to use (more information).
onOpen	EventEmitter<Builder>	Yes	Invoked when the builder is opened (more information).
onSave	EventEmitter<Builder>	Yes	Invoked when the form definition is saved (more information).
onChange	EventEmitter<Builder>	Yes	Invoked when the form definition is changed (more information).
onPreview	EventEmitter<Builder>	Yes	Invoked when a definition can be previewed (more information).
onEdit	EventEmitter<Builder>	Yes	Invoked when the edit panel is opened or closed (more information).
onClose	EventEmitter<Builder>	Yes	Invoked when the builder is closed (more information).

🗃️ Fields

Name	Type	Description
controller	Builder	Contains a reference to the Builder instance.

▶️ Methods

Name	Description
l10nEditor	Invokes the l10n editor for the supplied l10n contract (more information).
stylesEditor	Invokes the styles editor for the supplied styles contract(more information).

👩‍💻 Example

App module

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { TripettoBuilderModule } from "@tripetto/builder/angular";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, TripettoBuilderModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

App HTML

app.component.html

<tripetto-builder (onSave)="formSaved($event)"></tripetto-builder>

App component

app.component.ts

import { Component } from "@angular/core";
import { IDefinition } from "@tripetto/builder";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  formSaved(definition: IDefinition) {
    // Do something with the form definition
    console.log(definition);
  }
}