Skip to main content

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.


Read the Angular implementation guide for more information and examples.


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.


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


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



⏬ Inputs

definitionIDefinitionYesSpecifies the form definition to load (when omitted an empty form is loaded).
fontsstring | "inherit"YesSpecifies the path to the folder with the font files (more information).
localeL10n.ILocaleYesSpecifies the locale data for the builder (more information).
translationsL10n.TTranslation | L10n.TTranslation[]YesSpecifies the translations for the builder and blocks (more information).
namespace{...}YesSpecifies a block namespace object to use or load (more information).
tierIBuilderTierYesSpecifies a tier for the builder (more information).
licensestringYesSpecifies a license code for the builder (more information).
zoom"1:1" | "fit" | "fit-horizontal" | "fit-vertical"YesSpecifies the initial zoom state for the builder (more information).
centeringbooleanYesSpecifies if the content in the builder is centered instead of left-aligned (default is true).
controlsbooleanYesSpecifies the location of the navigation and zoombar (default is right).
rubberBandEffectbooleanYesSpecifies if the rubber band effect (also known as the elastic overscrolling effect) is enabled for the builder (more information).
disableResizingbooleanYesDisables automatic resizing when the dimensions of the HTML element that holds the builder are changed (more information).
disableProloguebooleanYesSpecifies if the prologue feature should be disabled (more information).
disableEpiloguebooleanYesSpecifies if the epilogue feature should be disabled (more information).
disableNestingbooleanYesSpecifies if creating new nested branches (subforms) should be disabled.
disableZoombarbooleanYesDisables the visual zoombar that is shown when the form exceeds the size of the builder viewport.
disableLogobooleanYesDisables the Tripetto logo in the navigation bar.
disableSaveButtonbooleanYesDisables the save button in the navigation bar.
disableRestoreButtonbooleanYesDisables the restore button in the navigation bar (more information).
disableClearButtonbooleanYesDisables the clear button in the navigation bar (more information).
disableEditButtonbooleanYesDisables the edit button in the navigation bar (more information).
disableCloseButtonbooleanYesDisables the close button in the navigation bar (more information).
disableTutorialButtonbooleanYesDisables the tutorial button in the navigation bar.
disableOpenCloseAnimationbooleanYesDisables the open and close animation of the builder.
showTutorialbooleanYesShows the tutorial dialog on startup.
previewURLstringYesSpecifies the URL of a preview page (more information).
supportURLstring | falseYesSpecifies an URL to a custom help or support page or supply false to disable this button.
helpTopics{...}YesSpecifies URLs to help topics and enables assistive buttons/links in the builder (more information).
nestedFormModebooleanYesSpecifies if the builder should run in nested form mode (more information).
disableFormAbortbooleanYesDisables the possibility to abort the whole form in nested forms (more information).
disableCreateEmptyFormbooleanYesDisables the possibility to create new (empty) nested forms.
disableConvertToFormbooleanYesDisables the possibility to convert sections into nested forms or vice-versa.
disableMoveToFormbooleanYesDisables the possibility to move sections to existing nested forms.
onMenuFunctionYesInvoked when the context menu of a node, section, branch, or condition is requested (more information).
onOpenFormFunctionYesInvoked when the builder wants to open a subform for editing (more information).
onListFormsFunctionYesInvoked when the builder needs the list of forms that can be used as subform (more information).
onBrowseFormsFunctionYesInvoked when the builder wants to browse for a subform (more information).
browseFormsLabelstringYesSpecifies an alternative label for the browse forms feature (more information).
onLoadFormFunctionYesInvoked when the builder wants to load a certain subform (more information).
onUpdateFormFunctionYesInvoked when the builder wants to know if there is an update available for a certain form (more information).
onSaveFormFunctionYesInvoked when the builder wants to save a subform (more information).
saveFormLabelstringYesSpecifies an alternative label for the save form feature (more information).
onBreadcrumbFunctionYesInvoked everytime when a nested subform is opened or closed in the builder (more information).

📢 Outputs

onLoadEventEmitter<Builder>YesInvoked when the builder is loaded (more information).
onErrorEventEmitter<{...}>YesInvoked when the builder is loaded (more information).
onReadyEventEmitter<Builder>YesInvoked when the builder is ready to use (more information).
onOpenEventEmitter<Builder>YesInvoked when the builder is opened (more information).
onSaveEventEmitter<Builder>YesInvoked when the form definition is saved (more information).
onChangeEventEmitter<Builder>YesInvoked when the form definition is changed (more information).
onPreviewEventEmitter<Builder>YesInvoked when a definition can be previewed (more information).
onEditEventEmitter<Builder>YesInvoked when the edit panel is opened or closed (more information).
onCloseEventEmitter<Builder>YesInvoked when the builder is closed (more information).

🗃️ Fields

controllerBuilderContains a reference to the Builder instance.

▶️ Methods

l10nEditorInvokes the l10n editor for the supplied l10n contract (more information).
stylesEditorInvokes the styles editor for the supplied styles contract(more information).

👩‍💻 Example

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

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

Run Try on CodeSandbox