Skip to main content

Implement builder using Angular

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

✅ 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 install @tripetto/builder

📄 Basic implementation​

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.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 {}

Run Try on CodeSandbox

📦 Loading blocks​

By default, the builder does not contain any blocks (question types). So, you must load the desired blocks. There is a specific guide about the different options for loading blocks. But as an example, you can load a set of stock blocks (blocks built and maintained by the Tripetto team) simply by importing them. The first step is to add these packages to your project:

npm install @tripetto/block-calculator @tripetto/block-checkbox @tripetto/block-checkboxes @tripetto/block-date @tripetto/block-device @tripetto/block-dropdown @tripetto/block-email @tripetto/block-error @tripetto/block-evaluate @tripetto/block-file-upload @tripetto/block-hidden-field @tripetto/block-mailer @tripetto/block-matrix @tripetto/block-multi-select @tripetto/block-multiple-choice @tripetto/block-number @tripetto/block-paragraph @tripetto/block-password @tripetto/block-phone-number @tripetto/block-picture-choice @tripetto/block-radiobuttons @tripetto/block-ranking @tripetto/block-rating @tripetto/block-regex @tripetto/block-scale @tripetto/block-setter @tripetto/block-statement @tripetto/block-stop @tripetto/block-text @tripetto/block-textarea @tripetto/block-url @tripetto/block-variable @tripetto/block-yes-no

Next, add imports to your code to load the appropriate blocks (the blocks will self-register and become available to the builder):

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";

// Load the blocks
import "@tripetto/block-calculator";
import "@tripetto/block-checkbox";
import "@tripetto/block-checkboxes";
import "@tripetto/block-date";
import "@tripetto/block-device";
import "@tripetto/block-dropdown";
import "@tripetto/block-email";
import "@tripetto/block-error";
import "@tripetto/block-evaluate";
import "@tripetto/block-file-upload";
import "@tripetto/block-hidden-field";
import "@tripetto/block-mailer";
import "@tripetto/block-matrix";
import "@tripetto/block-multi-select";
import "@tripetto/block-multiple-choice";
import "@tripetto/block-number";
import "@tripetto/block-paragraph";
import "@tripetto/block-password";
import "@tripetto/block-phone-number";
import "@tripetto/block-picture-choice";
import "@tripetto/block-radiobuttons";
import "@tripetto/block-ranking";
import "@tripetto/block-rating";
import "@tripetto/block-regex";
import "@tripetto/block-scale";
import "@tripetto/block-setter";
import "@tripetto/block-statement";
import "@tripetto/block-stop";
import "@tripetto/block-text";
import "@tripetto/block-textarea";
import "@tripetto/block-url";
import "@tripetto/block-variable";
import "@tripetto/block-yes-no";

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

Run Try on CodeSandbox

tip

The example above uses static imports for adding the stock block packages. It results in a code bundle that includes all the imported blocks. There is also an option to dynamically load blocks. That preserves JS bundle bloat. Please read the Block loading guide for more information about loading blocks.

⏭️ Up next​

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

Loading and saving​

Miscellaneous​

Customization​