SurveyJS Angular Form Library

SurveyJS Angular Form Library is a free and open-source Angular component library for rendering dynamic, JSON-driven forms and surveys in Angular applications.

The survey-angular-ui package integrates SurveyJS Form Library with Angular, renders forms defined with SurveyJS JSON form definitions, and collects user responses in the browser. It works together with the framework-independent survey-core package, which provides the form model and handles form structure, validation, conditional logic, calculations, navigation, localization, and other core behavior. Installing survey-angular-ui brings survey-core with it — you build a model from JSON with survey-core and bind it to this package's <survey> component to display.

Use SurveyJS Angular Form Library to build multi-step forms, surveys, quizzes, assessments, calculator forms, and other data-entry tools. Form definitions and submitted responses can be stored and processed in your own backend and database.

You can create form definitions manually, generate them with AI, or build them visually with SurveyJS Creator, an embeddable drag-and-drop form builder.

Installation

Requires Angular v12.0.0 or newer and the @angular/cdk package:

npm install survey-angular-ui
npm install @angular/cdk --save

Angular v8–v11 are supported by the legacy survey-angular package, which depends on Knockout and is obsolete. See Add SurveyJS Form Library to an Angular v8–v11 Application.

Usage

Import SurveyModule in your NgModule:

// app.module.ts
import { SurveyModule } from "survey-angular-ui";

@NgModule({
  imports: [ /* ... */ SurveyModule ],
  // ...
})
export class AppModule { }

Build a model and bind it to the <survey> element:

// app.component.ts
import { Component } from "@angular/core";
import { Model } from "survey-core";

const surveyJson = {
  elements: [
    { name: "firstName", title: "Enter your first name:", type: "text" },
    { name: "satisfaction", title: "How satisfied are you?", type: "rating" }
  ]
};

@Component({ selector: "app-root", templateUrl: "./app.component.html" })
export class AppComponent {
  surveyModel = new Model(surveyJson);

  constructor() {
    this.surveyModel.onComplete.add((sender) => {
      console.log(JSON.stringify(sender.data, null, 2));
    });
  }
}

<!-- app.component.html -->
<survey [model]="surveyModel"></survey>

Add the style sheet to the styles array in angular.json:

"styles": [
  "src/styles.css",
  "node_modules/survey-core/survey-core.min.css"
]

When using standalone components, add SurveyModule to the component's imports array and import the style sheet in the component file instead:

import "survey-core/survey-core.min.css";

This applies the Default theme. For other predefined themes and CSS-variable customization, refer to Themes & Styles.

Theme Adapters

A theme adapter maps an existing design system's CSS variables onto SurveyJS design tokens, so an embedded survey inherits the look of the host application. Adapters ship with survey-core as plain CSS — load one after the base style sheet:

"styles": [
  "node_modules/survey-core/survey-core.min.css",
  "node_modules/survey-core/themes/adapters/bootstrap-default.css"
]

Adapters are available for Bootstrap (plus Bootswatch variants), Material UI, and shadcn/ui, with matching icon sets (survey-core/themes/adapters/icons/lucide, .../icons/mui). See Theme Adapters.

Key Features

Dynamic Forms and Surveys

• Render dynamic JSON-driven forms and surveys in Angular applications
• Multi-step forms, quizzes, assessments, calculator forms, and survey pop-ups
• Conditional visibility, branching, calculations, and expression-based logic
• Input validation, save-and-resume workflows, and dynamic content

Form Controls

• 20+ built-in question and input types
• Dynamic panels and repeating question groups
• Custom question types and reusable components
• Electronic signature, image capture, file upload, matrices, and other advanced controls

Angular Integration

• Native Angular components
• TypeScript support
• Framework-independent form model through survey-core
• Client-side rendering without a required SurveyJS backend

Data and Backend Integration

• Connect to any server, API, or database
• Store form definitions and submitted responses in your own infrastructure
• Load choices from web services
• Integrate third-party components and services
• Backend integration examples for PHP, ASP.NET Core, and Node.js

Appearance and Localization

• Built-in themes and custom branding
• Theme Adapters for Bootstrap, Material UI, and shadcn/ui
• Multi-language forms and right-to-left language support
• Community-supported UI localization

Related packages

| Package | Purpose | | --- | --- | | survey-core | Platform-independent survey model (installed automatically) | | survey-react-ui | React renderer | | survey-vue3-ui | Vue 3 renderer | | survey-js-ui | HTML/CSS/JavaScript renderer |

Resources

• Website
• Documentation
• Get Started with Angular
• Form Library Demos for Angular
• Release Notes
• Roadmap
• What's New

For AI coding agents: https://surveyjs.io/llms.txt indexes the documentation. Any documentation page is also available as raw Markdown — append .md to its URL, for example https://surveyjs.io/form-library/documentation/get-started-angular.md.

SurveyJS Ecosystem

| Product | Purpose | License | | --- | --- | --- | | Form Library | Render dynamic forms from JSON (this package) | MIT | | Survey Creator | Drag-and-drop form builder UI | Commercial | | Dashboard | Visualize and analyze collected results | Commercial | | PDF Generator | Render forms and responses as PDF | Commercial | | AI Form Response Extractor | Extract responses from paper forms, PDFs, and images into a SurveyJS schema (ai-form-response-extractor) | MIT |

Build from Source

Requires Node.js 20 or later — CI builds on Node 20.x and 22.x. This monorepo does not use npm workspaces: each package installs independently, but a root install is still required for the shared tooling (linting, Playwright).

1. Clone the repo and install shared dependencies

   git clone https://github.com/surveyjs/survey-library.git
   cd survey-library
   npm install

2. Build survey-core first

   This package resolves survey-core from ../survey-core/build, so the model must be built before this library can be built or tested. Follow Build from sources in the survey-core README.

3. Install dependencies and build this library

   cd packages/survey-angular-ui
   npm install
   npm run build

   Build output goes to the build directory.

4. Run a test application

   cd example
   npm install
   cd ..
   npm run serve:example:dev

   This runs a local HTTP server at http://localhost:4200/.

5. Run unit tests

   Unit tests run through the Angular CLI, which uses Karma and Jasmine.

   npm run test         # single run, headless Chrome
   npm run test:watch   # watch mode

6. Run end-to-end tests

   E2E, visual-regression, and accessibility tests are Playwright suites. Angular serves a production build of the example app, so build it first. Do not start an HTTP server yourself — the Playwright config runs serve:example:prod itself.

   npm run build:example:prod              # produces example/dist
   npm run e2e:ci                          # e2e
   npm run e2e:ci -- --grep "TestName"     # a single test
   npm run scr:ci                          # visual regression
   npm run accessibility-tests:ci          # accessibility

Licensing

SurveyJS Form Library is distributed under the MIT license.