---
title: Zoom In/Out and Expand/Collapse Survey Elements
product: Survey Creator
description: Explore our interactive JavaScript form builder demo featuring zoom in/out functionality, expand/collapse options on page drag, and easy-to-use expand/collapse buttons for efficient survey management.
framework: Angular
source: https://surveyjs.io/survey-creator/examples/expand-and-collapse-survey-elements/angular
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Zoom In/Out and Expand/Collapse Survey Elements (Angular)

Survey Creator allows users to create surveys and forms of any complexity and length. However, longer forms can be challenging to navigate and manage because their structure becomes harder to see. To facilitate the work with surveys, especially when rearranging its elements, survey authors can collapse and expand form elements and adjust the scale of the entire form on the design surface using a set of UI controls. These tools help achieve a more compact view to easily reposition survey elements.

## Scale a Survey 

With scaling, survey creators can zoom in on a specific part of a survey or zoom out to get a clear view of its structure. Users can control the zoom level using the "Zoom In," "Zoom Out," and "Zoom to 100%" buttons. To hide these buttons and disable the zoom feature, set the [`allowZoom`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#allowZoom) property to `false`:

```js
const creatorOptions = {
  // ...
  allowZoom: false
};
const creator = new SurveyCreatorModel(creatorOptions);
```

## Expand and Collapse Survey Elements

To make editing of survey elements easier, questions, panels, and pages on the design surface can expand or collapse. Users can control this by using individual Expand/Collapse buttons, along with the "Collapse All" and "Expand All" buttons. When collapsing or expanding all elements, users can also activate the "Lock Question State" button. This ensures that when using the "Collapse All" and "Expand All" buttons, only pages and panels are affected, while the state of the questions remains unchanged. If you wish to disable the ability to expand and collapse elements in the UI, simply set the [`expandCollapseButtonVisibility`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#expandCollapseButtonVisibility) property to `"never"`:

```js
const creatorOptions = {
  // ...
  expandCollapseButtonVisibility: "never"
};
const creator = new SurveyCreatorModel(creatorOptions);
```

You can use the [`collapsePages`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapsePages), [`collapsePanels`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapsePanels), and [`collapseQuestions`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapseQuestions) properties to specify the initial state for pages, panels, and questions:

```js
const creatorOptions = {
  // Collapse all survey elements at startup
  collapsePages: true,
  collapsePanels: true,
  collapseQuestions: true
};
const creator = new SurveyCreatorModel(creatorOptions);
```

Survey elements can be expanded and collapsed at runtime using the [`expandElement(el)`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#expandElement), [`collapseElement(el)`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#collapseElement), [`expandAll()`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#expandAll), and [`collapseAll()`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#collapseAll) methods. In addition, you can handle the [`onElementGetExpandCollapseState`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onElementGetExpandCollapseState) event to change an element's state in response to a certain action or event, for example, when a drag and drop operation starts or users click the "Expand All" button. In this demo, the `onElementGetExpandCollapseState` event is used to expand and select the last page when a survey JSON schema is loaded. Refer to the Code tab for a code example.

## Collapse Pages on Drag Start

Survey pages on the design surface can automatically collapse when users start dragging a survey element to reposition it. This feature helps rearrange surveys quickly and efficiently. By default, pages collapse only when users begin dragging a page. If you also want pages to collapse when users start dragging a question or panel, enable the [`collapseOnDrag`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapseOnDrag) property as shown below. In this case, when moving a question or panel, pages collapse to help you select a target page. As you drag an element over it, the page expands, allowing you to see its layout and choose the perfect spot for placement. In this demo, the `collapseOnDrag` property is disabled.

```js
const creatorOptions = {
  // ...
  collapseOnDrag: true
};
const creator = new SurveyCreatorModel(creatorOptions);
```

## 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/survey_json.js`

```js
export const surveyJSON = {
  "title": "Product/Market Fit Survey Template",
  "pages": [
    {
      "name": "user-information",
      "title": "User Information",
      "elements": [
        {
          "type": "radiogroup",
          "name": "customer_role",
          "title": "What best describes your role?",
          "choices": [
            "Engineering Lead",
            "Project Manager",
            "Software Developer",
            "Designer",
            "Product Manager",
            "CEO / Founder",
            "Customer Support"
          ],
          "showOtherItem": true,
          "otherText": "Other",
          "colCount": 2
        },
        {
          "type": "radiogroup",
          "name": "start_using",
          "title": "How did you start using the product?",
          "choices": [
            {
              "value": "created",
              "text": "I created my account"
            },
            {
              "value": "invited",
              "text": "I was invited to an account"
            }
          ]
        },
        {
          "type": "radiogroup",
          "name": "product_discovering",
          "title": "How did you first discover the product? ",
          "choices": [
            "Friend or colleague",
            "Search engine",
            "Facebook",
            "Twitter",
            "Blog"
          ],
          "showOtherItem": true,
          "otherText": "Other",
          "colCount": 2
        },
        {
          "type": "radiogroup",
          "name": "paid_customer",
          "title": "Do you currently pay for the product? ",
          "isRequired": true,
          "choices": [
            "Yes",
            "No"
          ]
        }
      ]
    },
    {
      "name": "product-satisfaction",
      "title": "Product Satisfaction",
      "elements": [
        {
          "type": "radiogroup",
          "name": "product_fit",
          "title": "How would you feel if you could no longer use the product?",
          "isRequired": true,
          "choices": [
            {
              "value": "3",
              "text": "Very disappointed"
            },
            {
              "value": "2",
              "text": "Somewhat disappointed"
            },
            {
              "value": "1",
              "text": "Not disappointed"
            }
          ]
        },
        {
          "type": "comment",
          "name": "product_fit_comment",
          "visibleIf": "{product_fit} notempty",
          "title": "Please help us understand why you selected the answer above"
        }
      ]
    },
    {
      "name": "product-alternatives-benefits",
      "title": "Alternatives & Benefits",
      "elements": [
        {
          "type": "radiogroup",
          "name": "product_alternative",
          "title": "What would you use as an alternative if [the product] were no longer available?",
          "choices": [
            "Alternative 1",
            "Alternative 2",
            "Alternative 3",
            "Alternative 4",
            "Alternative 5",
            "Alternative 6"
          ],
          "showOtherItem": true,
          "otherText": "Other (please name)",
          "colCount": 2
        },
        {
          "type": "radiogroup",
          "name": "product_benefit",
          "title": "What is the primary benefit that you have received from the product?",
          "choices": [
            "Benefit 1",
            "Benefit 2",
            "Benefit 3",
            "Benefit 4",
            "Benefit 5",
            "Benefit 6"
          ],
          "showOtherItem": true,
          "colCount": 2
        },
        {
          "type": "radiogroup",
          "name": "product_recommend",
          "title": "Have you recommended the product to anyone?",
          "choices": [
            "Yes",
            "No"
          ]
        }
      ]
    },
    {
      "name": "nps-feedback",
      "title": "Net Promoter Score & Feedback",
      "elements": [
        {
          "type": "rating",
          "name": "nps_score",
          "title": "How likely are you to recommend the product to a friend or colleague?",
          "isRequired": true,
          "rateCount": 11,
          "rateMin": 0,
          "rateMax": 10,
          "minRateDescription": "Most unlikely",
          "maxRateDescription": "Most likely"
        },
        {
          "type": "radiogroup",
          "name": "favorite_functionality",
          "title": "What's your favorite functionality / add-on for the product?",
          "choices": [
            "Feature 1",
            "Feature 2",
            "Feature 3",
            "Feature 4",
            "Feature 5",
            "Feature 6"
          ],
          "showOtherItem": true,
          "colCount": 2
        },
        {
          "type": "comment",
          "name": "product_improvement",
          "title": "How could the product be improved to better meet your needs?"
        }
      ]
    },
    {
      "name": "follow-up",
      "title": "Follow-Up",
      "elements": [
        {
          "type": "multipletext",
          "name": "contact_customer",
          "title": "Want us to follow up? Leave your name and email here:",
          "items": [
            {
              "name": "Name"
            },
            {
              "name": "E-mail",
              "inputType": "email",
              "validators": [
                {
                  "type": "email"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};
```

### `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 { surveyJSON } from "./survey_json";
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

@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({ collapsePages: true });
        creator.onElementGetExpandCollapseState.add((_, options) => {
            // Expand and select the last page on loading
            if (options.reason === "loading") {
                if (options.element.visibleIndex === creator.survey.pageCount - 1) {
                    options.collapsed = false;
                    creator.selectedElement = options.element;
                }
            }
        });
        creator.JSON = surveyJSON;
        
        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/expand-and-collapse-survey-elements/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/expand-and-collapse-survey-elements/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/expand-and-collapse-survey-elements/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/expand-and-collapse-survey-elements/vanillajs.md)