--- title: Lazy Loading product: Form Library description: Reduce form load time in your JavaScript app with automatic lazy loading. Server-side filtering allows easy search by an item being typed even if only a part of a drop-down list has been loaded. framework: Angular source: https://surveyjs.io/form-library/examples/lazy-loading-dropdown/angular index: https://surveyjs.io/form-library/examples/overview.md --- # Lazy Loading (Angular) Lazy loading (also "on-demand loading" and "pagination") is a technique that delays loading non-critical data until it is required. This technique improves performance and reduces form load time. SurveyJS Form Library allows you to paginate choices in Single- and Multi-Select Dropdown questions. This feature is configured in the same manner for both types. In this example the first Dropdown lazy-loads the entire list of countries, while the other two are cascading Dropdowns: you first select a region, and then lazy-load only the countries within that region. You can also type in a search string to filter the country list on the server. Switch between available JavaScript frameworks to view a dedicated demo version for jQuery, React, Angular, Vue.js, or Vanilla JavaScript. ## Configure On-Demand Loading To configure lazy loading, follow the steps below: 1. Handle the [`onChoicesLazyLoad`](https://surveyjs.io/form-library/documentation/surveymodel#onChoicesLazyLoad) event. This event occurs when a question requests the next portion of choice items. Within the event handler, you need to send a request for the next portion to the server. Refer to the event description for information on the handler's parameters. 1. Enable a question's [`choicesLazyLoadEnabled`](https://surveyjs.io/form-library/documentation/questiondropdownmodel#choicesLazyLoadEnabled) property. This property specifies that choices for the given question should be loaded on demand. ## Preload the Default Value When you load choices from a server, choice display texts become available only after data is loaded, which does not happen until a user opens the Dropdown or Tag Box. However, a display text for a default choice item is required before that. In this case, you can individually load data for the default item within the [`onGetChoiceDisplayValue`](https://surveyjs.io/form-library/documentation/surveymodel#onGetChoiceDisplayValue) event handler. Refer to the event description for information on the handler's parameters. In this demo, the `onGetChoiceDisplayValue` event handler is used to get the display text "France" for the default value "FRA". ## Implement Lazy Loading in Cascading Dropdowns In cascading dropdowns, the options of a dependent dropdown are determined by the selected value in a parent dropdown. When implementing lazy loading in this scenario, pay attention to the following details: - In the `onChoicesLazyLoad` event handler, you need to include the parent dropdown's value in the query string of your API request, along with the `skip`, `take`, and `filter` parameters. - Use the [`resetValueIf`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#resetValueIf) expression to automatically clear the dependent dropdown's value when the parent dropdown changes. In the following code, `region` is the name of the parent dropdown: ```js "resetValueIf": "{region} empty || {region} notempty" ``` The rest of the setup is the same as for a regular lazy-loaded dropdown. ## See Also [Lazy Loading for Long Forms](/form-library/examples/survey-lazy/ (linkStyle)) ## Files ### `src/app/components/json.ts` ```ts export const json = { "elements": [ { "type": "dropdown", "name": "country", "title": "Select a country", "isRequired": true, "defaultValue": "FRA", "choicesLazyLoadEnabled": true, "choicesLazyLoadPageSize": 40 }, { "type": "panel", "name": "countriesByRegion", "title": "Filter countries by selected region", "description": "Only countries from the selected region are queried.", "elements": [{ "type": "dropdown", "name": "region", "title": "Select a region", "choices": ["Africa", "Americas", "Asia", "Europe", "Oceania"] }, { "type": "dropdown", "name": "reg_country", "title": "Select a country", "choicesLazyLoadEnabled": true, "resetValueIf": "{region} empty || {region} notempty" }] } ] }; ``` ### `src/app/components/survey.component.css` ```css /* You can add your custom CSS here. */ ``` ### `src/app/components/survey.component.html` ```html ``` ### `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.onChoicesLazyLoad.add((_, options) => { if (options.question.getType() !== "dropdown") return; // Form query strings for different questions let url; if (options.question.name === "country") { url = `https://surveyjs.io/api/CountriesExamplePagination?skip=${options.skip}&take=${options.take}`; } if (options.question.name === "reg_country") { url = `https://surveyjs.io/api/GetCountriesPaginationRegionFilter?skip=${options.skip}&take=${options.take}` const region = survey.getValue("region"); // Obtain a value of the "Region" field if (region) { url += `®ion=${encodeURIComponent(region)}`; } } if (options.filter) { url += `&filter=${encodeURIComponent(options.filter)}`; } sendRequest(url, (data) => { options.setItems(data.countries, data.total); }); }); survey.onGetChoiceDisplayValue.add((_, options) => { if (options.question.getType() !== "dropdown") return; if (options.question.name === "country" || options.question.name === "reg_country") { const valuesStr = options.values.map(value => "values=" + value).join("&"); const url = 'https://surveyjs.io/api/GetCountryNames?' + valuesStr; sendRequest(url, (data) => { options.setItems(data.countryNames); }); } }); function sendRequest(url, onloadSuccessCallback) { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onload = () => { if (xhr.status === 200) { onloadSuccessCallback(JSON.parse(xhr.response)); } }; xhr.send(); } 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 ``` ### `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 ``` ### `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/lazy-loading-dropdown/reactjs.md) - [Vue 3](https://surveyjs.io/form-library/examples/lazy-loading-dropdown/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/lazy-loading-dropdown/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/lazy-loading-dropdown/vanillajs.md)