29.09.2022 17:00 UTC Watch the Event


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 is declared in environment.ts

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

So these 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 as shown below:

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

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

Localization data is stored in key-value pairs:

  AbpAccount: { // AbpAccount is the resource name
    Key: "Value",
    PagerInfo: "Showing {0} to {1} of {2} entries"

So we can use this key like this:

<h1>{{ 'AbpAccount::PagerInfo' | abpLocalization:'20':'30':'50' }}</h1>

<!-- Output: Showing 20 to 30 of 50 entries -->

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.

You can add interpolation parameters as arguments to instant() and get() methods.

this.localizationService.instant('AbpIdentity::UserDeletionConfirmation', 'John');

// with fallback value
  { key: 'AbpIdentity::UserDeletionConfirmation', defaultValue: 'Default Value' },

// Output
// User 'John' will be deleted. Do you confirm that?

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


// 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:


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

      key: 'AbpIdentity::UserDeletionConfirmation',
      defaultValue: 'Default Value',

Localization resources are stored in the localization property of ConfigState.

RTL Support

As of v2.9 ABP has RTL support. If you are generating a new project with v2.9 and above, everything is set, you do not need to do any changes. If you are migrating your project from an earlier version, please follow the 2 steps below:

Step 1. Create Chunks for Bootstrap LTR and RTL

Find styles configuration in angular.json and make sure the chunks in your project has bootstrap-rtl.min and bootstrap-ltr.min as shown below.

  "projects": {
    "MyProjectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [
                "input": "node_modules/@abp/ng.theme.shared/styles/bootstrap-rtl.min.css",
                "inject": false,
                "bundleName": "bootstrap-rtl.min"
                "input": "node_modules/bootstrap/dist/css/bootstrap.min.css",
                "inject": true,
                "bundleName": "bootstrap-ltr.min"
                "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
                "inject": true,
                "bundleName": "fontawesome-all.min"
                "input": "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css",
                "inject": true,
                "bundleName": "fontawesome-v4-shims.min"

#### Step 2. Clear Lazy Loaded Fontawesome in AppComponent

If you have created and injected chunks for Fontawesome as seen above, you no longer need the lazy loading in the `AppComponent` which was implemented before v2.9. Simply remove them. The `AppComponent` in the template of the new version looks like this:

import { Component } from '@angular/core';

  selector: 'app-root',
  template: `
export class AppComponent {}

See Also

What's Next?

In this document
Mastering ABP Framework
Mastering ABP Framework Book

Build maintainable .NET solutions by following software development best practices using ABP.

See Details