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.

tip

Read the Angular implementation guide for more information and examples.

info

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.

Module

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

Component

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

Selector

<tripetto-runner-classic></tripetto-runner-classic>

⏬ Inputs

Name	Type	Optional	Description
definition	IDefinition | Promise<IDefinition | undefined>	Yes	Specifies the definition to run (more information).
view	"live" | "test" | "preview"	Yes	Specifies the view mode of the runner (more information).
styles	IClassicStyles | Promise<IClassicStyles | undefined>	Yes	Specifies the styles (colors, font, size, etc.) for the runner (more information).
l10n	IL10n | Promise<IL10n | undefined>	Yes	Specifies the localization (locale and translation) information (more information).
display	"inline" | "page"	Yes	Specifies the display mode of the runner (more information).
snapshot	ISnapshot | Promise<ISnapshot>	Yes	Specifies the snapshot that should be restored (more information).
persistent	boolean	Yes	Specifies 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).
license	string | Promise<string | undefined>	Yes	Specifies a license code for the runner (more information).
removeBranding	boolean	Yes	Specifies if all visual Tripetto branding should be removed from the runner (a valid license is required).
attachments	IRunnerAttachments	Yes	Specifies the attachments handler used by blocks that support file uploads (more information).
className	string	Yes	Specifies a custom class name for the HTML element that holds the runner (more information).
customStyle	CSSProperties	Yes	Specifies the inline style for the HTML element that holds the runner (more information).
customCSS	string	Yes	Specifies custom CSS rules for blocks used in the runner (more information).
language	string	Yes	Specifies the preferred language to use for the form locale and translation (more information).
locale	L10n.ILocale | ((locale: string) => L10n.ILocale | Promise<L10n.ILocale | undefined> | undefined)	Yes	Specifies the locale or the locale loader function to use (more information).
translations	L10n.TTranslation | L10n.TTranslation[] | (language: string, name: string, version: string) => L10n.TTranslation | L10n.TTranslation[] | Promise<L10n.TTranslation | L10n.TTranslation[] | undefined>	Yes	Specifies the translations or the translations loader function to use (more information).
builder	Builder	Yes	Specifies the Builder instance to bind to (more information).
onReload	() => IDefinition | Promise<IDefinition>	Yes	Specifies a function that is invoked when the runner wants to reload the definition (more information).
onPause	{...}	Yes	Specifies a function or recipe that is invoked when the runner wants to pause (more information).

📢 Outputs

Name	Type	Optional	Description
onReady	EventEmitter<Instance>	Yes	Invoked when the runner is ready (more information).
onChange	EventEmitter<Instance>	Yes	Invoked when there is a change in the runner (more information).
onImport	EventEmitter<Instance>	Yes	Invoked when data can be imported into the instance (more information).
onData	EventEmitter<Instance>	Yes	Invoked when there is a data change (more information).
onAction	EventEmitter<{...}>	Yes	Invoked when the user performs an action (more information).
onSubmit	EventEmitter<{...}>	Yes	Invoked when the runner submits data (more information).
onComplete	EventEmitter<{...}>	Yes	Invoked when the runner is completed but after the data is submitted (more information).
onEdit	EventEmitter<{...}>	Yes	Invoked when an edit action is requested (more information).
onTouch	EventEmitter<void>	Yes	Invoked when the runner is "touched" by a user (more information).
onDestroy	EventEmitter<void>	Yes	Invoked when the runner is destroyed. (more information).

🗃️ Fields

Name	Type	Description
controller	IClassicRunner | undefined	Contains a reference to the runner instance.

👩‍💻 Example

App module

app.module.ts

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

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

App HTML

app.component.html

<tripetto-runner-classic [definition]="definition"></tripetto-runner-classic>

App component

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  definition = /* Supply your form definition here */;
}