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
