Angular Translations Have Arrived

Angular Translations Have Arrived

The AngularPwaMessenger now uses the new Angular i18n features and will serve as an example of one use of the features. Having a development translation file (dev.json) helps when developing new features, fixing bugs, etc. This file is primarily used while developing the application, ...

With Angular 10.1 the Angular-CLI has added a new feature. The $localize function will become publicly supported and the Angular-CLI supports the extraction of translations from Typescript code. 

That improves the ease of use for Angular i18n strongly. The AngularPwaMessenger now uses the new Angular i18n features and will serve as an example of one use of the features.

Template

In the main.component.html template Angular i18n is used like this:

HTML

1

<mat-toolbar color="primary">

2

     Messenger

3

    ...

4

     <button mat-button (click)="openLoginDialog()" i18n="@@mainLogin">Login</button>       

5

     <button mat-button (click)="logout()" i18n="@@mainLogout">Logout</button>

6

</mat-toolbar>

7

In lines 2 and 5 are the "i18n" attributes that Angular uses for translation. They have behind the "@@" a unique key string that identifies the string to translate. This project starts the key with the component identifier "main" and adds the text identifier "Login" for example. That provides a human-readable key with the context in the XLF file.

Typescript

In the main.component.ts file Angular i18n is used like this:

TypeScript

1

@Component( {

2

  selector: 'app-main',

3

  templateUrl: './main.component.html',

4

  styleUrls: ['./main.component.scss']

5

} )

6

export class MainComponent implements OnInit, OnDestroy {

7

8

  private readonly componentKey = TranslationsService.MAIN_COMPONENT;

9

10

  constructor( private localdbService: LocaldbService,

11

    private jwttokenService: JwttokenService,

12

    private netConnectionService: NetConnectionService,

13

    private messageService: MessageService,

14

    private translationsService: TranslationsService,

15

    public dialog: MatDialog,

16

    private cryptoService: CryptoService,

17

    private sanitizer: DomSanitizer,

18

    @Inject( DOCUMENT ) private document ) { }

19

...

20

  private onlineAgain( online: boolean ): void {

21

    if ( online && this.jwttokenService.getExpiryDate().getTime() < new Date().getTime() ) {

22

      alert( this.translationsService.getTranslation(this.componentKey, TranslationsService.ONLINE_AGAIN_MSG));

23

    }

24

  }

25

...

26

}

In line 8 the component key for the main component is set by a static property of the service.

In line 14 the translation service gets injected. That stores the translations for this application.

In line 22 alert box is created with a text from the translation service. The translation service gets the component key as a parameter (optional) and the text key of the translation service for the translation requested.

Translation Service

The translation.service.ts stores and provides the translations:

TypeScript

1

@Injectable({

2

  providedIn: 'root'

3

})

4

export class TranslationsService {

5

  private translatonsMap = new Map<string,string>();

6

  public static readonly ONLINE_AGAIN_MSG = 'onlineAgainMsg';

7

  public static readonly MAIN_COMPONENT = 'main';

8

9

  constructor() { 

10

    const str = $localize`:@@onlineAgainMsg:You are online again and your token is expired. To reconnect please logout and login again.`;

11

    this.translatonsMap.set(TranslationsService.MAIN_COMPONENT+'_'+TranslationsService.ONLINE_AGAIN_MSG, str);

12

  }

13

14

  public getTranslation(componentKey: string, key: string): string {

15

    const result = this.translatonsMap.get(componentKey + '_' + key);

16

    return !!result ? result : this.translatonsMap.get(key);

17

  }

18

}

In line 5 the map is defined to hold all the translations of this service.

In line 6 the static read-only property for the key of the translated text is defined.

In line 7 the static read-only property for the key of the component is defined.

In line 10 the translation is created with key and text for Angular i18n. The translations are evaluated at the compile time of an Angular application.

In line 11 the translation is set in the translation map. The translation key and the map key can be the same but do not have to be. The service puts a "_" between the component key and the text key.

In line 14 the method getTranslation tries to get a translation from the translation map with component key and text key.

tutorial web dev angular html typescript i18n

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Modern HTML 5 Tutorial for Angular Devs

In this tutorial, we’ll teach you HTML which is used as the template language for Angular. We’ll build a simple HTML “app” before tackling any Angular concepts since it’s a prerequisite in any web development and one of the three pillars of the web along with JavaScript and CSS.

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.

Corona Virus Pandemic has brought the world to a standstill. Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public

Commonly Used HTML Tags with Examples

HTML tags are keywords used in HTML to display web-pages with certain properties. They are further used for defining HTML elements. An HTML element consists of a starting tag.

HTML Basics to Learn HTML for Web Development

HTML is the mark-up language most websites are written in. In this article, we will delve into the most basics of HTML like tags and elements that are of utmost importance while writing any code in HTML. These tags help in the structuring and display of content on the web pages.