Skip to main content

Angular component

The runner Angular component allows to use the runner in Angular applications with ease. To use the component, simply import TripettoClassicModule from the package and feed it to your application's @NgModule imports array. This makes the <tripetto-runner-classic> 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 runner package. Make sure to import the module and component from this folder.


import { TripettoClassicModule } from "@tripetto/runner-classic/angular";


import { TripettoClassicComponent } from "@tripetto/runner-classic/angular";



⏬ Inputs

definitionIDefinition | Promise<IDefinition | undefined>YesSpecifies the definition to run (more information).
view"live" | "test" | "preview"YesSpecifies the view mode of the runner (more information).
stylesIClassicStyles | Promise<IClassicStyles | undefined>YesSpecifies the styles (colors, font, size, etc.) for the runner (more information).
l10nIL10n | Promise<IL10n | undefined>YesSpecifies the localization (locale and translation) information (more information).
display"inline" | "page"YesSpecifies the display mode of the runner (more information).
snapshotISnapshot | Promise<ISnapshot>YesSpecifies the snapshot that should be restored (more information).
persistentbooleanYesSpecifies if the runner should try to store sessions in the local store to preserve persistency on navigation between multiple pages that host the runner (more information).
licensestring | Promise<string | undefined>YesSpecifies a license code for the runner (more information).
removeBrandingbooleanYesSpecifies if all visual Tripetto branding should be removed from the runner (a valid license is required).
attachmentsIRunnerAttachmentsYesSpecifies the attachments handler used by blocks that support file uploads (more information).
classNamestringYesSpecifies a custom class name for the HTML element that holds the runner (more information).
customStyleCSSPropertiesYesSpecifies the inline style for the HTML element that holds the runner (more information).
customCSSstringYesSpecifies custom CSS rules for blocks used in the runner (more information).
languagestringYesSpecifies the preferred language to use for the form locale and translation (more information).
localeL10n.ILocale | ((locale: string) => L10n.ILocale | Promise<L10n.ILocale | undefined> | undefined)YesSpecifies the locale or the locale loader function to use (more information).
translationsL10n.TTranslation | L10n.TTranslation[] | (language: string, name: string, version: string) => L10n.TTranslation | L10n.TTranslation[] | Promise<L10n.TTranslation | L10n.TTranslation[] | undefined>YesSpecifies the translations or the translations loader function to use (more information).
builderBuilderYesSpecifies the Builder instance to bind to (more information).
onReload() => IDefinition | Promise<IDefinition>YesSpecifies a function that is invoked when the runner wants to reload the definition (more information).
onPause{...}YesSpecifies a function or recipe that is invoked when the runner wants to pause (more information).

📢 Outputs

onReadyEventEmitter<Instance>YesInvoked when the runner is ready (more information).
onChangeEventEmitter<Instance>YesInvoked when there is a change in the runner (more information).
onImportEventEmitter<Instance>YesInvoked when data can be imported into the instance (more information).
onDataEventEmitter<Instance>YesInvoked when there is a data change (more information).
onActionEventEmitter<{...}>YesInvoked when the user performs an action (more information).
onSubmitEventEmitter<{...}>YesInvoked when the runner submits data (more information).
onCompleteEventEmitter<{...}>YesInvoked when the runner is completed but after the data is submitted (more information).
onEditEventEmitter<{...}>YesInvoked when an edit action is requested (more information).
onTouchEventEmitter<void>YesInvoked when the runner is "touched" by a user (more information).
onDestroyEventEmitter<void>YesInvoked when the runner is destroyed. (more information).

🗃️ Fields

controllerIClassicRunner | undefinedContains a reference to the runner instance.

👩‍💻 Example

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

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

Run Try on CodeSandbox