Usage with Angular

Starting with Tripetto is very easy when you are using Angular. Depending on your project's requirements there are two main Tripetto components to implement:

• Form Runner component to run forms and collect responses. It handles form execution (including complex logic and response collection), form UI and form UX. Form respondents filling out a form are working in a runner;
• Form Builder component to create forms. It is a visual UI component that allows building smart flowing forms and surveys like flowcharts in the browser. End users who edit forms are working in the builder.

🏃 Add a form to your Angular app

To add a form to your app, you first need to create a form. To do so, you can use the Tripetto Studio web app or add the form builder to your app (in case you want to allow users to create forms inside your app). Next, add the Angular component of one of the stock runners to your project and supply the form definition of your form to it.

1️⃣ 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

2️⃣ Implement runner component

The next step is to import and implement the Angular component. 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 */;
}

▶️ Learn more

🏗️ Add the form builder to your Angular app

The Tripetto builder package comes with a built-in Angular component. This makes it very easy to use the builder in an Angular application.

1️⃣ Add package to your project

First of all, you need to add the Tripetto builder package to your project. This package is published on npm. To do so, run the following command:

npm

npm install @tripetto/builder

Yarn

yarn add @tripetto/builder

pnpm

pnpm add @tripetto/builder

2️⃣ Implement builder component

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. The Angular component is located in a subfolder named angular inside the builder package. Here's an 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);
  }
}

▶️ Learn more