Template Translation - Angular 2/4 and i18n

There are four phases in the i18n template translation process:
1. Marking the template element inside the component for translation. 
e.g. <span i18n>Hello i18n</span>
       <img [src]="Logo" i18n-title title="Angular4 Logo"/>
2. Angular i18n tool will extract the marked elements into standard translation source file.
3. Edit the file and insert target language. 
<trans-unit id="244bcd334kdda82506d258137adf23412c" datatype="html">
        <source>Email</source>
        <target>Email</target>

</trans-unit>
4. The compiler imports the translation files, replaces the original messages with the target you set in step 3 and generates fresh version of the app.

 <hr/>
For more details visit the Angular.io website documentation.

Comments

Post a Comment

Popular posts from this blog

Angular 2/4 NGX Translate Complete Implementation with Example

Image
Angular 2/4 Application Internationalisation/Localisation (i18n) Example using Angular CLI Step-1: Angular CLI Installation npm install -g @angular/cli Generating an Angular project via a development server ng new angular2-ngx-translate-demo-angular-cli Serving an Angular project via a development server ng serve Navigate to http://localhost:4200/ Create language JSON with the json values to convert to the values. Let's say we are suing English(en) and French(fr) languages for Angular 2 localization. angular2-ngx-translate-demo-angular-cli/src/i18n/en.json angular2-ngx-translate-demo-angular-cli/src/i18n/fr.json The sample content for any language file can be as per below structure: { "header": { "title": "Welcome to Angular 4", "head": "Here are some links to help you start", "list":"Tour of Heroes", } } and now convert the languages to the next JSON as fr.json: { "hea
Read more

Angular 2/4 and TypeScript Dynamically Access/Append HTML Nodes

datatable.service.ts ==================== import { Injectable } from '@angular/core'; @Injectable() export class DatatableService {   constructor() { }   getData(): Promise<any> {    return new Promise((resolve, reject) => {      setTimeout(() => {        resolve(this.dataTableData);      }, 100);    });  }   dataTableData = [{       'name': 'Vinod',       'email': 'vinod@gmail.com',       'regDate': '2017-01-09T14:48:34-08:00',       'city': 'Delhi',       'age': 34   },   {       'name': 'Anita',       'email': 'anita@gmail.com',       'regDate': '2017-01-23T20:09:52-08:00',       'city': 'Bangalore',       'age': 32   },   {       'name': 'Avnish',       'email': 'avi@gmail.com',       'regDate': '2017-11-19T19:11:33-08:00',  
Read more

A Quick Tutorials on Angular 2 Platform Concepts and Examples

Angular 2 and Introduction Angular 2 is an open source JavaScript/TypeScript framework to build web applications in HTML and JavaScript/TypeScript and has been conceived as a mobile first approach. Features Angular2 is faster and easier than AngularJS. It supports latest version of browsers and also supports old browsers. It is a cross platform framework. Angular 2 is mainly focused on mobile applications. Code structure is very simplified than the previous version of Angular. dvantages If an application is a heavy load, then Angular2 keeps it fully UI responsive. It uses server side rendering for fast views on mobile. It works well with ECMAScript and other languages that compile to JavaScript. It uses dependency injection to maintain apps without writing too long code. Everything will be the component based approach. The TypeScript is a super set of JavaScript which is migrated to TypeScript and code written in TypeScript makes less prone to run time erros. S
Read more