Skip to content

Commit aa06795

Browse files
committed
Add translation questions
1 parent 3ae6c09 commit aa06795

File tree

1 file changed

+77
-4
lines changed

1 file changed

+77
-4
lines changed

README.md

Lines changed: 77 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,30 @@
182182
|174| [What are the applications of HTTP interceptors?](#what-are-the-applications-of-http-interceptors)|
183183
|175| [Is multiple interceptors supported in Angular?](#is-multiple-interceptors-supported-in-angular)|
184184
|176| [How can I use interceptor for an entire application?](#how-can-i-use-interceptor-for-an-entire-application)|
185+
|177| [How does Angular simplifies Internationalization?](#how-does-angular-simplifies-internationalization)|
186+
|178| [How do you manually register locale data?](#how-do-you-manually-register-locale-data)|
187+
|179| [What are the four phases of template translation?](#what-are-the-four-phases-of-template-translation)|
188+
|180| [What is the purpose of i18n attribute?](#what-is-the-purpose-of-i18n-attribute)|
189+
|181| [](#)|
190+
|182| [](#)|
191+
|183| [](#)|
192+
|184| [](#)|
193+
|185| [](#)|
194+
|186| [](#)|
195+
|187| [](#)|
196+
|188| [](#)|
197+
|189| [](#)|
198+
|190| [](#)|
199+
|191| [](#)|
200+
|192| [](#)|
201+
|193| [](#)|
202+
|194| [](#)|
203+
|195| [](#)|
204+
|196| [](#)|
205+
|197| [](#)|
206+
|198| [](#)|
207+
|199| [](#)|
208+
|200| [](#)|
185209

186210
1. ### What is Angular Framework?
187211

@@ -2697,19 +2721,68 @@
26972721
26982722
**[⬆ Back to Top](#table-of-contents)**
26992723
2700-
177. ### ?
2724+
177. ### How does Angular simplifies Internationalization?
2725+
2726+
Angular simplifies the below areas of internationalization,
2727+
1. Displaying dates, number, percentages, and currencies in a local format.
2728+
2. Preparing text in component templates for translation.
2729+
3. Handling plural forms of words.
2730+
4. Handling alternative text.
27012731
27022732
**[⬆ Back to Top](#table-of-contents)**
27032733
2704-
178. ### ?
2734+
178. ### How do you manually register locale data?
2735+
By default, Angular only contains locale data for en-US which is English as spoken in the United States of America . But if you want to set to another locale, you must import locale data for that new locale. After that you can register using `registerLocaleData` method and the syntax of this method looks like below,
2736+
```javascript
2737+
registerLocaleData(data: any, localeId?: any, extraData?: any): void
2738+
```
2739+
For example, let us import German locale and register it in the application
2740+
```javascript
2741+
import { registerLocaleData } from '@angular/common';
2742+
import localeDe from '@angular/common/locales/de';
2743+
2744+
registerLocaleData(localeDe, 'de');
2745+
```
27052746
27062747
**[⬆ Back to Top](#table-of-contents)**
27072748
2708-
179. ### ?
2749+
179. ### What are the four phases of template translation?
2750+
The i18n template translation process has four phases:
2751+
2752+
1. **Mark static text messages in your component templates for translation:** You can place i18n on every element tag whose fixed text is to be translated. For example, you need i18n attribue for heading as below,
2753+
```javascript
2754+
<h1 i18n>Hello i18n!</h1>
2755+
```
2756+
2757+
2. **Create a translation file:** Use the Angular CLI xi18n command to extract the marked text into an industry-standard translation source file. i.e, Open terminal window at the root of the app project and run the CLI command xi18n.
2758+
```bash
2759+
ng xi18n
2760+
```
2761+
The above command creates a file named `messages.xlf` in your project's root directory.
2762+
**Note:** You can supply command options to change the format, the name, the location, and the source locale of the extracted file.
2763+
2764+
3. **Edit the generated translation file:** Translate the extracted text into the target language. In this step, create a localization folder (such as `locale`)under root directory(src) and then create target language translation file by copying and renaming the default messages.xlf file. You need to copy source text node and provide the translation under target tag.
2765+
For example, create the translation file(messages.de.xlf) for German language
2766+
```javascript
2767+
<trans-unit id="greetingHeader" datatype="html">
2768+
<source>Hello i18n!</source>
2769+
<target>Hallo i18n !</target>
2770+
<note priority="1" from="description">A welcome header for this sample</note>
2771+
<note priority="1" from="meaning">welcome message</note>
2772+
</trans-unit>
2773+
```
2774+
2775+
4. **Merge the completed translation file into the app:** You need to use Angular CLI build command to compile the app, choosing a locale-specific configuration, or specifying the following command options.
2776+
1. --i18nFile=path to the translation file
2777+
2. --i18nFormat=format of the translation file
2778+
3. --i18nLocale= locale id
27092779
27102780
**[⬆ Back to Top](#table-of-contents)**
27112781
2712-
180. ### ?
2782+
180. ### What is the purpose of i18n attribute?
2783+
The Angular i18n attribute marks translatable content. It is a custom attribute, recognized by Angular tools and compilers. The compiler removes it after translation.
2784+
**Note:** Remember that i18n is not an Angular directive.
2785+
27132786
27142787
**[⬆ Back to Top](#table-of-contents)**
27152788

0 commit comments

Comments
 (0)