Implement runner using Angular

The Tripetto stock runners come with a built-in Angular component. This makes it very easy to use a runner in an Angular application. This quickstart shows how to use it.

✅ Add packages to your project

First, you need to add the required packages to your project. To do so, run the following command:

Autoscroll

npm install @tripetto/runner-autoscroll @tripetto/runner

Chat

npm install @tripetto/runner-chat @tripetto/runner

Classic

npm install @tripetto/runner-classic @tripetto/runner

info

The stock runners all depend on the Runner library. The Tripetto Runner library is the actual workhorse of the Tripetto runners. It parses the form definition and prepares it for UI rendering.

📄 Basic implementation

To use the runner, simply import the module from the package and feed it to your application's @NgModule imports array. This makes the runner selector available in your application. The Angular component is located in a subfolder named angular inside the runner package. Here's an example:

Autoscroll

App module

app.module.ts

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

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

App HTML

app.component.html

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

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 */;
}

Chat

App module

app.module.ts

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

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

App HTML

app.component.html

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

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 */;
}

Classic

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 */;
}

📥 Collecting response data

The next step is actual data retrieval from the form. To do so, you use the onSubmit event. This event fires when the form completes and the response data is ready for further processing. The event receives a reference to the active form instance. Together with one of the Export functions from the Runner library, you use it to retrieve data in a convenient format. The following example shows how to export the data using the exportables or CSV function.

Autoscroll

App module

app.module.ts

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

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

App HTML

app.component.html

<tripetto-runner-autoscroll (onSubmit)="onSubmit($event)"></tripetto-runner-autoscroll>

App component

app.component.ts

import { Component, Output } from "@angular/core";
import { Instance, Export } from "@tripetto/runner";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @Output() onSubmit(event: { instance: Instance }) {
    // This exports all exportable data in the form
    const exportables = Export.exportables(event.instance);

    // Iterate through all the fields
    exportables.fields.forEach((field) => {
      // Output each field name and value to the console
      console.log(`${field.name}: ${field.string}`);
    });

    // This exports the collected data as a CSV object
    const csv = Export.CSV(event.instance);

    // Output CSV to the console
    console.log(csv.fields);
    console.log(csv.record);
  }
}

Chat

App module

app.module.ts

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

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

App HTML

app.component.html

<tripetto-runner-chat (onSubmit)="onSubmit($event)"></tripetto-runner-chat>

App component

app.component.ts

import { Component, Output } from "@angular/core";
import { Instance, Export } from "@tripetto/runner";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @Output() onSubmit(event: { instance: Instance }) {
    // This exports all exportable data in the form
    const exportables = Export.exportables(event.instance);

    // Iterate through all the fields
    exportables.fields.forEach((field) => {
      // Output each field name and value to the console
      console.log(`${field.name}: ${field.string}`);
    });

    // This exports the collected data as a CSV object
    const csv = Export.CSV(event.instance);

    // Output CSV to the console
    console.log(csv.fields);
    console.log(csv.record);
  }
}

Classic

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 (onSubmit)="onSubmit($event)"></tripetto-runner-classic>

App component

app.component.ts

import { Component, Output } from "@angular/core";
import { Instance, Export } from "@tripetto/runner";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @Output() onSubmit(event: { instance: Instance }) {
    // This exports all exportable data in the form
    const exportables = Export.exportables(event.instance);

    // Iterate through all the fields
    exportables.fields.forEach((field) => {
      // Output each field name and value to the console
      console.log(`${field.name}: ${field.string}`);
    });

    // This exports the collected data as a CSV object
    const csv = Export.CSV(event.instance);

    // Output CSV to the console
    console.log(csv.fields);
    console.log(csv.record);
  }
}

tip

The onSubmit event supports some additional features for error handling. Have a look at the Collecting response data guide for more information and guidance.

📖 Reference

Autoscroll

Have a look at the complete autoscroll runner API reference for detailed documentation. In the examples above, the following symbols were used:

• TripettoAutoscrollModule
• onSubmit

Chat

Have a look at the complete chat runner API reference for detailed documentation. In the examples above, the following symbols were used:

• TripettoChatModule
• onSubmit

Classic

Have a look at the complete classic runner API reference for detailed documentation. In the examples above, the following symbols were used:

• TripettoClassicModule
• onSubmit

⏭️ Up next

Now you've got the basic implementation for the runner up and running, dive deeper into the following topics:

• 💾 Collecting response data
• 🎨 Style your forms
• 🗛 Using fonts
• 🖥️ Display modes
• 📝 Prefilling forms
• 🔥 Runtime data usage
• ⏯️ Enable pause and resume
• 🧠 Form data persistency
• 📄 File uploads
• 🌍 Loading translations and locale data
• ✅ Validating response data
• 🤖 Prevent form spamming
• 📈 Track usage
• 🕹️ Controlling the runner
• 💸 Disable Tripetto branding
• 🛡️ Content Security Policy
• 📦 Custom blocks
• 📂 Package overview