v 1.9.6

Add a Survey to an Angular Application

This step-by-step tutorial will help you get started with the SurveyJS Library in an Angular application. To add a survey to your Angular application, follow the steps below:

As a result, you will create a survey displayed below:

You can find the full code in the following GitHub repository: Get Started with SurveyJS - Angular.

Install the survey-angular npm Package

The SurveyJS Library for Angular is distributed as a survey-angular npm package. Run the following command to install it:

npm install survey-angular --save

Configure Styles

SurveyJS is shipped with several style sheets that implement different themes. Open the angular.json file and reference one of these style sheets in it:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  // ...
  "projects": {
    "project-name": {
      "projectType": "application",
      // ...
      "architect": {
        "build": {
          // ...
          "options": {
            // ...
            "styles": [
              "src/styles.css",
              // Modern theme
              "node_modules/survey-angular/modern.min.css",
              // Default theme
              // "node_modules/survey-angular/survey.min.css"
            ],
            // ...
          }
        }
      }
    }
  }
}

To apply the referenced theme, call the applyTheme(themeName) method. Its argument accepts different values depending on the chosen theme:

  • Modern theme
    "modern"

  • Default theme (in various color schemes)
    "default", "orange", "darkblue", "darkrose", "stone", "winter", "winterstone"

  • Bootstrap theme (if your application uses Bootstrap)
    "bootstrap"

For instance, the following code applies the Modern theme:

import { Component, OnInit } from '@angular/core';
import { StylesManager } from "survey-angular";

@Component({
  // ...
})
export class AppComponent implements OnInit {
  ngOnInit() {
    StylesManager.applyTheme("modern");
  }
}

Create a Model

A model describes the layout and contents of your survey. The simplest survey model contains one or several questions without layout modifications.

Models are specified by model definitions (JSON objects). For example, the following model definition declares two textual questions, each with a title and a name. Titles are displayed on screen. Names are used to identify the questions in code.

const surveyJson = {
  elements: [{
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  }]
};

To instantiate a model, pass the model definition to the Model constructor as shown in the code below. The model instance will be later used to render the survey.

import { Component, OnInit } from '@angular/core';
import { ..., Model } from "survey-angular";

@Component({
  // ...
})
export class AppComponent implements OnInit {
  ngOnInit() {
    // ...
    const survey = new Model(surveyJson);
  }
}
View full code
import { Component, OnInit } from '@angular/core';
import { Model, StylesManager } from "survey-angular";

const surveyJson = {
  elements: [{
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  }]
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'My First Survey';
  ngOnInit() {
    StylesManager.applyTheme("modern");
    
    const survey = new Model(surveyJson);
  }
}

Render the Survey

A survey should be rendered in an HTML element. Add this element to your component template:

<div id="surveyContainer"></div>

To render a survey, call the render() method on the SurveyNG object as shown in the code below. Pass the model instance you created in the previous step to this method as the model property:

import { Component, OnInit } from '@angular/core';
import { ..., SurveyNG } from "survey-angular";

@Component({
  // ...
})
export class AppComponent implements OnInit {
  ngOnInit() {
    // ...
    SurveyNG.render("surveyContainer", { model: survey });
  }
}

If you replicate the code correctly, you should see the following survey:

Get Started with SurveyJS - Primitive Survey

View full code
<div id="surveyContainer"></div>
import { Component, OnInit } from '@angular/core';
import { Model, SurveyNG, StylesManager } from "survey-angular";

const surveyJson = {
  elements: [{
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  }]
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'My First Survey';
  ngOnInit() {
    StylesManager.applyTheme("modern");
    
    const survey = new Model(surveyJson);
    SurveyNG.render("surveyContainer", { model: survey });
  }
}

Handle Survey Completion

After a respondent completes a survey, the results are available within the onComplete event handler. In real-world applications, you should send the results to a server where they will be stored in a database and processed. In this tutorial, the results are simply output in an alert dialog:

import { Component, OnInit } from '@angular/core';
import { ..., Model } from "survey-angular";

@Component({
  // ...
})
export class AppComponent implements OnInit {
  alertResults (sender) {
    const results = JSON.stringify(sender.data);
    alert(results);
  }
  ngOnInit() {
    // ...
    const survey = new Model(surveyJson);
    survey.onComplete.add(this.alertResults);
    // ...
  }
}

Get Started with SurveyJS - Survey Results

As you can see, survey results are saved in a JSON object. Its properties correspond to the name property values of your questions in the model definition.

View full code
<div id="surveyContainer"></div>
import { Component, OnInit } from '@angular/core';
import { Model, SurveyNG, StylesManager } from "survey-angular";

const surveyJson = {
  elements: [{
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  }]
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'My First Survey';
  alertResults (sender) {
    const results = JSON.stringify(sender.data);
    alert(results);
  }
  ngOnInit() {
    StylesManager.applyTheme("modern");

    const survey = new Model(surveyJson);
    survey.onComplete.add(this.alertResults);
    SurveyNG.render("surveyContainer", { model: survey });
  }
}

Conclusion

You have learnt how to add a survey to your Angular application. For further information, refer to help topics within the Design a Survey section.