|
182 | 182 | |174| [What are the applications of HTTP interceptors?](#what-are-the-applications-of-http-interceptors)|
|
183 | 183 | |175| [Is multiple interceptors supported in Angular?](#is-multiple-interceptors-supported-in-angular)|
|
184 | 184 | |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| [](#)| |
185 | 209 |
|
186 | 210 | 1. ### What is Angular Framework?
|
187 | 211 |
|
|
2697 | 2721 |
|
2698 | 2722 | **[⬆ Back to Top](#table-of-contents)**
|
2699 | 2723 |
|
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. |
2701 | 2731 |
|
2702 | 2732 | **[⬆ Back to Top](#table-of-contents)**
|
2703 | 2733 |
|
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 | + ``` |
2705 | 2746 |
|
2706 | 2747 | **[⬆ Back to Top](#table-of-contents)**
|
2707 | 2748 |
|
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 |
2709 | 2779 |
|
2710 | 2780 | **[⬆ Back to Top](#table-of-contents)**
|
2711 | 2781 |
|
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 | +
|
2713 | 2786 |
|
2714 | 2787 | **[⬆ Back to Top](#table-of-contents)**
|
2715 | 2788 |
|
|
0 commit comments