---
title: Question Auto-Numbering
product: Form Library
description: Discover how question and page numbering enhances survey structure, user progress tracking, and logical sequencing. View this free demo for JavaScript to learn how to manage numbering within your survey, including page-based restart, hiding question numbers, and custom numbering within panels.
framework: Angular
source: https://surveyjs.io/form-library/examples/how-to-number-pages-and-questions/angular
index: https://surveyjs.io/form-library/examples/overview.md
---

# Question Auto-Numbering (Angular)

Question and page numbers provide a clear structure to a survey and help respondents track their progress and identify survey elements. They also ensure logical sequencing and grouping of related questions, making it easier to understand the flow of the survey and navigate through it. This demo shows how to manage numbering within your survey: use sequential or recursive numbering, restart numbering on each page or within individual panels, or hide question numbers altogether. Switch to the Angular, React, Vue, Vanilla JS, or jQuery version of this demo to view code for your framework.

## How to Number Questions

Surveys support the following numbering modes:

- Sequential numbering      
Survey elements are numbered in order, regardless of whether they are nested in panels or not.

- Recursive numbering       
Survey elements are numbered in a manner that takes into account their nesting level (for example, 1 → 1.1 → 1.1.1).

- Sequential numbering with a reset on each page      
Survey elements are numbered in order, but the numbering starts anew on each page.

By default, questions are not numbered. To enable one of the numbering modes, set `SurveyModel`'s [`showQuestionNumbers`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showQuestionNumbers) property to `true` (sequential numbering), `"recursive"`, or `"onpage"`. In this demo, you can switch between those modes using the **Question numbering** dropdown.

Questions within panels can participate in survey-level numbering or have an individual numbering sequence. Use `PanelModel`'s [`showQuestionNumbers`](https://surveyjs.io/form-library/documentation/api-reference/panel-model#showQuestionNumbers) property to specify the desired numbering mode: `"default"` to continue survey-level numbering, `"recursive"` to number nested questions recursively, `"onpanel"` to start numbering within the panel from scratch, or `"off"` to hide numbers for nested questions. Use the "Reset numbering within each panel" checkbox to apply the `"onpanel"` mode in this demo.

Questions are numbered starting with 1. If you want to start numbering with a different number or use letters instead, specify `SurveyModel`'s [`questionStartIndex`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#questionStartIndex) property. You can include desired prefixes and suffixes in the property value:

```js
const surveyJson = {
  // ...
  "questionStartIndex": "a.", // a., b., c., ...
  "questionStartIndex": "#3", // #3, #4, #5, ...
  "questionStartIndex": "(B)." // (B)., (C)., (D)., ...
}
```

To access the number of an individual question, use its [`no`](https://surveyjs.io/form-library/documentation/api-reference/question#no) property. Note that the property's value may contain letters, prefixes, and suffixes if the `questionStartIndex` specifies them. If you want to hide a question number, set the [`showNumber`](https://surveyjs.io/form-library/documentation/api-reference/question#showNumber) property to `false`.

## How to Number Panels

Panels have numbers only in recursive numbering mode. If you want to number panels in other modes, enable the [`showNumber`](https://surveyjs.io/form-library/documentation/api-reference/panel-model#showNumber) property for each panel that should have a number. The [`no`](https://surveyjs.io/form-library/documentation/api-reference/panel-model#no) property allows you to access the panel number. This demo displays the "Show panel numbers" checkbox that lets you change page number visibility.

## How to Number Pages

Pages do not have numbers, but you can enable `SurveyModel`'s [`showPageNumbers`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showPageNumbers) property to display them. In this demo, click the "Show page numbers" checkbox to show or hide page numbers at runtime.

## Files

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

```ts
export const json = {
  "pages": [
   {
    "name": "page1",
    "title": "Page 1",
    "elements": [
     {
      "type": "text",
      "name": "question1",
      "title": "Question 1"
     },
     {
      "type": "panel",
      "name": "panel1",
      "title": "Panel 1",
      "showNumber": true,
      "innerIndent": 1,
      "elements": [
       {
        "type": "text",
        "name": "panel1-question1",
        "title": "Panel 1, nested question 1"
       },
       {
        "type": "text",
        "name": "panel1-question2",
        "title": "Panel 1, nested question 2"
       }
      ]
     }
    ]
   },
   {
    "name": "page2",
    "title": "Page 2",
    "elements": [
     {
      "type": "panel",
      "name": "panel2",
      "title": "Panel 2",
      "showNumber": true,
      "innerIndent": 1,
      "elements": [
       {
        "type": "text",
        "name": "panel2-question1",
        "title": "Panel 2, nested question 1"
       },
       {
        "type": "text",
        "name": "panel2-question2",
        "title": "Panel 2, nested question 2"
       }
      ]
     },
     {
      "type": "text",
      "name": "question2",
      "title": "Question 2"
     },
     {
      "type": "text",
      "name": "question3",
      "title": "Question 3"
     }
    ]
   },
   {
    "name": "page3",
    "title": "Page 3",
    "elements": [
     {
      "type": "text",
      "name": "question4",
      "title": "Question 4"
     },
     {
      "type": "panel",
      "name": "panel3",
      "title": "Panel 3",
      "showNumber": true,
      "innerIndent": 1,
      "elements": [
       {
        "type": "text",
        "name": "panel3-question1",
        "title": "Panel 3, nested question 1"
       },
       {
        "type": "text",
        "name": "panel3-question2",
        "title": "Panel 3, nested question 2"
       }
      ]
     }
    ]
   }
  ],
  "showPageNumbers": true,
  "showQuestionNumbers": true
};
```

### `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/how-to-number-pages-and-questions/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/how-to-number-pages-and-questions/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/how-to-number-pages-and-questions/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/how-to-number-pages-and-questions/vanillajs.md)