---
title: Order Form Template
product: Survey Creator
description: Choose from a collection of free ready-made templates of most common web form sections, e.g., an order form or contact info. The elements ship with predefined properties for easy and fast integration into your JavaScript app.
framework: Angular
source: https://surveyjs.io/survey-creator/examples/order-form-template/angular
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Order Form Template (Angular)

The Order Table question type collects details about ordered items. This demo shows how to create an order table using either Multi-Select Matrix or Dynamic Matrix. Multi-Select Matrix displays a complete list of available products and allows users to select quantities for the items they want to purchase. This implementation is ideal for shorter product lists. Dynamic Matrix lets users choose items from a drop-down menu, which makes it suitable for longer product lists. To implement any or both of these order tables in your application, create a specialized question type.

[Create Specialized Question Types](https://surveyjs.io/form-library/documentation/customize-question-types/create-specialized-question-types (linkStyle))

## Files

### `src/app/components/creator.component.css`

```css
/* You can define custom CSS rules here */
```

### `src/app/components/creator.component.html`

```html
<div style="position: fixed; top: 0; bottom: 0; right: 0; left: 0;">
    <survey-creator [model]="model"></survey-creator>
</div>
```

### `src/app/components/creator.component.ts`

```ts
import { Component, OnInit } from "@angular/core";
import { SurveyCreatorModel } from "survey-creator-core";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { ComponentCollection, Serializer, ItemValue } from "survey-core";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";

import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";

registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

function setupCustomProperties (className) {
    // Add a custom `price` property to the `itemvalue` class
    if (!Serializer.findProperty("itemvalue", "price")) {
        Serializer.addProperty("itemvalue", {
            name: "price",
            type: "number",
            default: 0,
            // Hide the property for built-in select-based questions (Dropdown, Checkboxes, Radio Button Group)
            visible: false
        });
    }

    // Create a custom `ordertableitem` class derived from `itemvalue`
    // to hide the `text`, `visibleIf`, and `enableIf` properties and show the `price` property
    if (!Serializer.findClass("ordertableitem")) {
        Serializer.addClass(
            "ordertableitem",
            [
                { name: "text", visible: false },
                { name: "visibleIf", visible: false },
                { name: "enableIf", visible: false },
                { name: "price", visible: true }
            ],
            (json) => new ItemValue(json, null, "ordertableitem"),
            "itemvalue"
        );
    }

    // Add a custom `orderItems` property to the `ordertable` class
    if (!Serializer.findProperty(className, "orderItems")) {
        Serializer.addProperty(className, {
            name: "orderItems",
            type: "ordertableitem[]",
            category: "general",
            visibleIndex: 3
        });
    }
}

// Add the Order Table question type
ComponentCollection.Instance.add({
    name: "ordertable",
    title: "Order Table",
    defaultQuestionTitle: "Order Table",
    questionJSON: {
        type: "matrixdropdown",
        columns: [{
            name: "price",
            title: "Price",
            cellType: "expression",
            displayStyle: "currency"
        }, {
            name: "qty",
            title: "Quantity",
            cellType: "text",
            inputType: "number",
            defaultValue: 0,
            min: 0,
            textUpdateMode: "onTyping"
        }, {
            name: "total",
            title: "Total",
            cellType: "expression",
            displayStyle: "currency",
            expression: "{row.qty} * {row.price}",
            totalType: "sum",
            totalDisplayStyle: "currency"
        }]
    },
    onInit() {
        setupCustomProperties("ordertable");
    },
    onLoaded (question) {
        this.updateRowsAndValues(question);
    },
    onPropertyChanged (question, propertyName) {
        // Update rows and default values each time an order item is added or removed
        if (propertyName === "orderItems") {
            this.updateRowsAndValues(question);
        }
    },
    onItemValuePropertyChanged (question, { name, propertyName }) {
        if (propertyName === "orderItems") {
            // Update rows and default values each time the name (`value`) of an order item is changed
            if (name === "value") {
                this.updateRowsAndValues(question);
            }
            // Update default values each time the price of an order item is changed
            if (name === "price") {
                this.setDefaultValues(question);
            }
        }
    },
    // Helper functions
    buildRows (question) {
        var rows = [];
        for (let i = 0; i < question.orderItems.length; i++) {
            const item = question.orderItems[i];
            if (!!item.value) {
                rows.push(item.value);
            }
        }
        question.contentQuestion.rows = rows;
    },
    setDefaultValues (question) {
        var defaultValue = question.contentQuestion.defaultValue || { };
        for (let i = 0; i < question.orderItems.length; i++) {
            const item = question.orderItems[i];
            if (!!item.value && !!item.price) {
                defaultValue[item.value] ? 
                    defaultValue[item.value]["price"] = item.price : 
                    defaultValue[item.value] = { price: item.price, qty: 0, total: 0 };
            }
        }
        question.contentQuestion.defaultValue = defaultValue;
    },
    updateRowsAndValues (question) {
        this.buildRows(question);
        this.setDefaultValues(question);
    }
});

// Add a Dynamic Order Table question type
ComponentCollection.Instance.add({
    name: "ordertabledynamic",
    title: "Dynamic Order Table",
    defaultQuestionTitle: "Dynamic Order Table",
    questionJSON: {
        type: "matrixdynamic",
        rowCount: 1,
        addRowText: "Add Item",
        columns: [{
            name: "item",
            title: "Item",
            cellType: "dropdown",
            isRequired: true
        }, {
            name: "price",
            title: "Price",
            cellType: "expression",
            displayStyle: "currency",
            defaultValue: 0
        }, {
            name: "qty",
            title: "Quantity",
            cellType: "text",
            inputType: "number",
            defaultValue: 1,
            min: 0,
            textUpdateMode: "onTyping"
        }, {
            name: "total",
            title: "Total",
            cellType: "expression",
            displayStyle: "currency",
            expression: "{row.qty} * {row.price}",
            totalType: "sum",
            totalDisplayStyle: "currency"
        }],
    },
    onInit() {
        setupCustomProperties("ordertabledynamic");
    },
    onLoaded (question) {
        // Update the Price column value when a user selects an order item in the Item column
        question.survey.onMatrixCellValueChanged.add((_, options) => {
            if (options.columnName === "item") {
                const itemQ = options.row.getQuestionByColumnName("item");
                const priceQ = options.row.getQuestionByColumnName("price");
                if (!!itemQ && !!priceQ) {
                    priceQ.value = !!itemQ.selectedItem ? itemQ.selectedItem.price : 0;
                }
            }
        });
        this.updateItemsColumn(question);
    },
    onPropertyChanged (question, propertyName) {
        // Update the Item column dropdown each time an order item is added or removed
        if (propertyName === "orderItems") {
            this.updateItemsColumn(question);
        }
    },
    onItemValuePropertyChanged (question, { propertyName }) {
        // Update the Item column dropdown each time an order item is changed
        if (propertyName === "orderItems") {
            this.updateItemsColumn(question);
        }
    },
    // A helper function
    updateItemsColumn (question) {
        question.contentQuestion.getColumnByName("item").choices = question.orderItems;
    }
});
@Component({
    // tslint:disable-next-line:component-selector
    selector: "component-survey-creator",
    templateUrl: "./creator.component.html",
    styleUrls: ["./creator.component.css"]
})
export class SurveyCreatorComponent implements OnInit {
    model: SurveyCreatorModel;
    ngOnInit() {
        const creator = new SurveyCreatorModel();
        creator.toolbox.defineCategories([{
          category: "Custom Items",
          items: [
              "ordertable",
              "ordertabledynamic",
          ]
        }], true);
        
        creator.JSON = {
          elements: [{
              type: "ordertable",
              name: "question1",
              orderItems: [
                { value: "Steak", price: 27 },
                { value: "Salmon", price: 22 },
                { value: "Beer", price: 5 }
              ]
          }, {
            type: "ordertabledynamic",
            name: "question2",
            orderItems: [
              { value: "Steak", price: 27 },
              { value: "Salmon", price: 22 },
              { value: "Beer", price: 5 }
            ]
          }]
        };
        this.model = creator;
    }
}
```

### `src/app/app.component.html`

```html
<component-survey-creator></component-survey-creator>
```

### `src/app/app.component.ts`

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
export class AppComponent {
    title = "CodeSandbox";
}
```

### `src/app/app.module.ts`

```ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { SurveyCreatorModule } from "survey-creator-angular";
import { SurveyCreatorComponent } from "./components/creator.component";

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

### `src/environments/environment.prod.ts`

```ts
export const environment = {
    production: true
};
```

### `src/environments/environment.ts`

```ts
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.

export const environment = {
    production: false
};
```

### `src/index.html`

```html
<app-root></app-root>
```

### `src/main.ts`

```ts
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.log(err));
```

### `src/polyfills.ts`

```ts
/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import "core-js/proposals/reflect-metadata";

/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
// import 'web-animations-js';  // Run `npm install web-animations-js`.

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import "zone.js/dist/zone"; // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
```

### `src/styles.css`

```css
/* You can add global styles to this file and import other style files */
```

### `src/typings.d.ts`

```ts
/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
    id: string;
}
```

### `.angular-cli.json`

```json
{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [ "assets", "favicon.ico" ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "prefix": "app",
      "styles": [ "styles.css"  ],
      "scripts": [  ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]
}
```

### `_tsconfig.json`

```json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "resolveJsonModule": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}
```

### `package.json`

```json
{
  "name": "surveyjs-angular",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "14.1.1",
    "@angular/cdk": "14.1.1",
    "@angular/common": "14.1.1",
    "@angular/compiler": "14.1.1",
    "@angular/core": "14.1.1",
    "@angular/forms": "14.1.1",
    "@angular/platform-browser": "14.1.1",
    "@angular/platform-browser-dynamic": "14.1.1",
    "@angular/router": "14.1.1",
    "core-js": "3.6.4",
    "rxjs": "6.5.4",
    "survey-angular-ui": "latest",
    "survey-creator-core": "latest",
    "survey-core": "latest",
    "survey-creator-angular": "latest",
    "tslib": "1.13.0",
    "zone.js": "0.11.7"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.0",
    "@angular/cli": "~13.0.0",
    "@types/jasmine": "3.6.3",
    "@types/jasminewd2": "2.0.8",
    "@types/node": "14.14.28",
    "codelyzer": "6.0.1",
    "jasmine-core": "3.6.0",
    "jasmine-spec-reporter": "6.0.0",
    "karma": "6.1.1",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-jasmine": "4.0.1",
    "karma-jasmine-html-reporter": "1.5.4",
    "protractor": "7.0.0",
    "ts-node": "9.1.1",
    "tslint": "~6.1.3",
    "typescript": "4.1.5"
  },
  "keywords": [ "angular", "surveyjs" ],
  "description": "SurveyJS-Angular example project"
}
```

## Other Frameworks

- [React](https://surveyjs.io/survey-creator/examples/order-form-template/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/order-form-template/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/order-form-template/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/order-form-template/vanillajs.md)