abp/docs/en/Angular/Localization/Index.md

Localization in Angular Projects

There are three ways to use localization in your project:

• Via localization pipe in your component's template
• Via localization service in your TypeScript files.
• Via the Config State

Before you read about the Localization Pipe and the Localization Service, you should know about localization keys.

The Localization key format consists of 2 sections which are Resource Name and Key. {{ ResourceName::Key }}

If you do not specify the resource name, it will be defaultResourceName which declared in environment.ts

const environment = {
  localization: {
    defaultResourceName: 'MyProjectName',
  },
};

So this two are the same:

<h1>{{ '::Key' | abpLocalization }}</h1>

<h1>{{ 'MyProjectName::Key' | abpLocalization }}</h1>

Using the Localization Pipe

You can use the abpLocalization pipe to get localized text as in this example:

<h1>{{ 'Resource::Key' | abpLocalization }}</h1>

The pipe will replace the key with the localized text.

You can also specify a default value using LocalizationWithDefault interface as followed:

<h1>{{ { key: 'Resource::Key', defaultValue: 'Default Value' } | abpLocalization }}</h1>

To use interpolation, you must give the values for interpolation as pipe parameters:

<h1>{{ 'Resource::Key' | abpLocalization:'Parameter 1':'Parameter 2' }}</h1>

Using the Localization Service

First of all you should import the LocalizationService from @abp/ng.core

import { LocalizationService } from '@abp/ng.core';

class MyClass {
  constructor(private localizationService: LocalizationService) {}
}

After that, you are able to use localization service.

this.localizationService.instant('Resource::Key');

// with fallback value
this.localizationService.instant({ key: 'Resource::Key', defaultValue: 'Default Value' });

To get a localized text as Observable use get method instead of instant:

this.localizationService.get('Resource::Key');

// with fallback value
this.localizationService.get({ key: 'Resource::Key', defaultValue: 'Default Value' });

Using the Config State

In order to you getLocalization method you should import ConfigState.

import { ConfigState } from '@abp/ng.core';

Then you can use it as followed:

this.store.selectSnapshot(ConfigState.getLocalization('ResourceName::Key'));

getLocalization method can be used with both localization key and LocalizationWithDefault interface.

this.store.selectSnapshot(
  ConfigState.getLocalization({
    key: 'ResourceName::Key',
    defaultValue: 'Default Value',
  }),
);

---

Localization resources are stored in the localization property of ConfigState.