---
title: Ranking Question
product: Form Library
description: Let your respondents prioritize a list of choices in order of preference, priority, importance, or other criteria. Create a form and run it in your JavaScript app with SurveyJS in minutes.
framework: Angular
source: https://surveyjs.io/form-library/examples/add-ranking-question-to-form/angular
index: https://surveyjs.io/form-library/examples/overview.md
---

# Ranking Question (Angular)

A Ranking survey question, or a rank order question, is a type of survey or research question that is used to determine people's opinions, attitudes, and priorities towards several characteristics of a certain subject or towards multiple related options. This question asks respondents to arrange a set of choices in order of preference, importance, or other criteria, or assign a numerical value to each choice based on their relative rank. For example, a survey ranking question might ask respondents to rank a set of job benefits in order of importance, or assign the highest value to the most important job benefit, and the lowest value to the least important one. This way an employer can get a solid understanding of overall ranking of several job benefits they are considering to offer, identify which of them employees prefer or value most, and act accordingly.

## Create a Ranking Question

To add a Ranking question to a form, define an object with the `type` property set to `"ranking"` and add it to the [`elements`](https://surveyjs.io/form-library/documentation/api-reference/pagemodel#elements) array. Use the [`choices`](https://surveyjs.io/form-library/documentation/api-reference/ranking-question-model#choices) array to configure ranking items. Each object in this array should have the following structure:

```js
{
  "value": any, // A unique value to be saved in the survey results.
  "text": string // A display text. When `text` is undefined, `value` is used as display text.
}
```

If you need to specify only the `value` property, you can set the `choices` property to an array of primitive values as shown in this demo. These values are both saved in survey results and used as display text.

You can also load choice values from a RESTful service. In this case, use the [`choicesByUrl`](https://surveyjs.io/form-library/documentation/api-reference/ranking-question-model#choicesByUrl) property instead of the `choices` array. Refer to the [ChoicesRestful](https://surveyjs.io/form-library/documentation/api-reference/choicesrestful) object for information on how to configure this property. The demo on this page defines local `choices`.

## Set the Initial Sort Order

Ranking items are sorted according to the `choices` array. If you want to sort them in ascending or descending alphabetical order, assign `"asc"` or `"desc"` to the [`choicesOrder`](https://surveyjs.io/form-library/documentation/api-reference/ranking-question-model#choicesOrder) property. Alternatively, you can set this property to `"random"`. In this case, choices appear in random order each time your survey is displayed.

## Drag a Ranking Item by the Icon

The entire ranking item area responds to drag gestures. If you want to limit the area and use only the drag icon as a drag handle, assign `"icon"` to the [`settings.rankingDragHandleArea`](https://surveyjs.io/form-library/documentation/api-reference/settings#rankingDragHandleArea) property. This setting affects all Ranking questions in your application.

## Carry Forward Responses

You can use the Ranking question to implement the Carry Forward Responses feature. This feature allows you to copy choices from one question to another. For example, you can ask respondents to select choices in a Checkboxes question and then rank the selected choices in a Ranking question. Refer to the following demo for more information: [Carry Forward Responses](https://surveyjs.io/form-library/examples/survey-carry-forward/).

## See Also

[Conditionally Display Choice Options](/form-library/examples/how-to-conditionally-display-choice-options/ (linkStyle))

## Files

### `src/app/components/json.ts`

```ts
export const json = {
  "elements": [
    {
      "type": "ranking",
      "name": "smartphone-features",
      "title": "Please rank the following smartphone features from the most important to the least",
      "isRequired": true,
      "choices": [
        "Long battery life",
        "Plenty of storage capacity",
        "High-quality camera",
        "Powerful CPU",
        "Large screen size",
        "High durability",
        "Low price"
      ]
    }
  ]
};
```

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

```css
/* You can add your custom CSS here. */
```

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

```html
<survey [model]="model" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; height:100%"></survey>
```

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

```ts
import { Component, OnInit } from "@angular/core";
import { Model } from "survey-core";
import { json } from "./json";
import "./survey.component.css";
import "survey-core/survey-core.min.css";

@Component({
    // tslint:disable-next-line:component-selector
    selector: "component-survey",
    templateUrl: "./survey.component.html",
    styleUrls: ["./survey.component.css"]
})
export class SurveyComponent implements OnInit {
    model: Model;
    ngOnInit() {
        const survey = new Model(json);
        survey.onComplete.add((sender, options) => {
            console.log(JSON.stringify(sender.data, null, 3));
        });
        this.model = survey;
    }
}
```

### `src/app/components/theme.ts`

```ts
export const themeJson = {};
```

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

```css

```

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

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

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

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
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 { SurveyModule } from "survey-angular-ui";
import { SurveyComponent } from "./components/survey.component";

@NgModule({
    declarations: [AppComponent, SurveyComponent],
    imports: [BrowserModule, SurveyModule],
    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 your custom CSS here. */
```

### `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-core": "latest",
    "survey-angular-ui": "latest",
    "tslib": "1.13.0",
    "zone.js": "0.11.7"
  },
  "devDependencies": {
    "@angular/cli": "1.6.6",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/core-js": "0.9.46",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "3.9.7"
  },
  "keywords": [ "angular", "surveyjs" ],
  "description": "SurveyJS-Angular example project"
}
```

## Other Frameworks

- [React](https://surveyjs.io/form-library/examples/add-ranking-question-to-form/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/add-ranking-question-to-form/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/add-ranking-question-to-form/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/add-ranking-question-to-form/vanillajs.md)