---
title: Survey Creator Interface Localization
product: Survey Creator
description: SurveyJS Creator provides multi-language support for localization of its interface. Leverage 30+ community-sourced dictionary files to create a multilingual form and add it to your JavaScript app.
framework: Angular
source: https://surveyjs.io/survey-creator/examples/survey-creator-interface-localization/angular
index: https://surveyjs.io/survey-creator/examples/overview.md
---
# Survey Creator Interface Localization (Angular)
Localization is the adaptation of a product to the local language of its users. Survey Creator supports UI translation into over 30 languages out of the box. In this demo, the Survey Creator UI is translated into German.
Translated strings are shipped as [dictionary files](https://github.com/surveyjs/survey-creator/tree/90de47d2c9da49b06a7f97414026d70f7acf05c6/packages/survey-creator-core/src/localization). The localization engine that works with the dictionaries is available as a separate script/module. This script/module imports dictionaries for all languages. Reference this script in the `` tag of your page or import this module into the component that renders Survey Creator:
```html
```
```js
import "survey-creator-core/survey-creator-core.i18n";
```
Since Survey Creator v1.9.112, you may reference or import only the languages you need, as shown below:
```html
```
```js
import "survey-creator-core/i18n/french";
import "survey-creator-core/i18n/german";
import "survey-creator-core/i18n/italian";
```
The default language for UI elements is English. To select another language, set the `currentLocale` property or Survey Creator's [`locale`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#locale) property. This demo shows Survey Creator UI translated into German.
If you want to change individual UI translations, get an object with all translation strings for a specific locale using the `getLocaleStrings(localeCode)` method and override the required properties in this object. You can find a full list of available properties in the [English dictionary](https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-core/src/localization/english.ts). Refer to the Code tab for a code example.
You can also introduce a custom locale to override multiple UI translations in a batch. The following code shows how to do it in a separate TypeScript translation file (dictionary):
```js
// custom-locale.ts
import { setupLocale } from "survey-creator-core";
const customLocaleStrings = {
ed: {
addNewQuestion: "New Question",
deletePage: "Remove Page"
}
};
setupLocale({
localeCode: "customlocale", // A short code used as a locale identifier (for example, "en", "de", "fr")
strings: customLocaleStrings // An object with custom translations
});
```
```js
import "./localization/custom-locale.ts";
import { editorLocalization } from "survey-creator-core";
// ...
// Activate the custom locale
editorLocalization.currentLocale = "customlocale";
// ----- or -----
creator.locale = "customlocale";
```
If any translation strings or other settings are missing in your custom locale, they will be taken from the English locale. You can specify the `defaultLocale` property to use another fallback locale:
```js
editorLocalization.defaultLocale = "fr";
```
## Files
### `src/app/components/creator.component.css`
```css
/* You can define custom CSS rules here */
```
### `src/app/components/creator.component.html`
```html
```
### `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 { getLocaleStrings } from "survey-creator-core";
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
// Override individual translations in an existing locale
const deuLocale = getLocaleStrings("de");
deuLocale.ed.addNewQuestion = "Neue Frage";
deuLocale.ed.addNewTypeQuestion = "Neue {0}";
@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();
// Enable the Deutsch locale for Survey Creator UI
creator.locale = "de";
// Enable the Deutsch locale for the survey being configured
creator.survey.locale = "de";
this.model = creator;
}
}
```
### `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"
})
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
```
### `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/survey-creator-interface-localization/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/survey-creator-interface-localization/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/survey-creator-interface-localization/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/survey-creator-interface-localization/vanillajs.md)