Mastering multilingual apps with Angular

​In today's interconnected world, developing applications that cater to a global audience is essential. Angular, a leading web application framework, provides robust tools for internationalization (i18n), enabling developers to create applications that support multiple languages and locales. This guide delves into mastering multi-language apps with Angular, highlighting the latest updates and best practices.

Why internationalize your Angular app?

The internet has broken down geographical barriers, allowing businesses, products, and services to reach a truly global audience. However, language remains a critical barrier. If your application only supports English, you're potentially alienating a significant percentage of the global population. While English is widely spoken, over 65% of global internet users prefer to browse and buy products in their native language.

Importance of i18n in web applications

Expanding market reach

By making your app multilingual, you gain access to non-English-speaking markets, increasing user acquisition and engagement. 

For example, Spanish and Mandarin are among the most spoken languages globally, with over 485 million native Spanish speakers and more than 920 million Mandarin speakers. Supporting these languages allows businesses to tap into a vast user base and improve accessibility.

Enhancing user experience

Users prefer content in their native language. Research shows that people are more likely to engage and convert when interacting with a website in their language. Providing properly localized content ensures a seamless user experience.

Legal and compliance requirements

Some countries have strict regulations requiring apps and websites to be available in the local language. In regions like the EU, certain data protection and accessibility laws encourage localization.

Improving SEO & visibility

Multilingual SEO (hreflang tags, localized URLs) helps increase search visibility in different countries. Google and other search engines prioritize region-specific content, which can improve ranking.

Building trust & brand loyalty

People trust brands that make an effort to communicate in their language. Offering localized content fosters inclusivity and accessibility.

Angular’s built-in i18n & localization features

Internationalization (i18n) in Angular is a structured approach that enables applications to support multiple languages, date formats, currency symbols, and cultural conventions without the need for major code rewrites. Instead of manually adjusting content for each locale, Angular provides a built-in i18n framework that simplifies the localization process.

Native support & optimization

Angular’s i18n is natively integrated, meaning it’s optimized for performance and doesn’t require third-party libraries for basic internationalization.

Unlike dynamic translation libraries (like ngx-translate), Angular’s approach is compile-time based, ensuring that only the required language assets are loaded in production.

Automatic locale formatting

Date, currency, and number formatting are adjusted automatically based on the selected locale.

This ensures that users across different regions see familiar formats.

Easy integration with build process

Localization is incorporated into Angular’s CLI, making it easier to extract and manage translations.

It follows an extract-and-translate workflow, where translation files are generated and loaded at build time.

Inside Angular’s i18n toolbox

Angular’s internationalization framework includes various built-in features to handle translations, formatting, and RTL support.

Translation markup

Angular provides a way to mark text directly in templates using the i18n attribute. This tells the framework that the marked content needs translation.

Example:

<h1 i18n="@@welcomeMessage">Welcome to our app!</h1>

• i18n="@@welcomeMessage" assigns a custom ID (welcomeMessage) to this translation, making it easier to manage.
• The extracted text will appear in an XLIFF (XML Localization Interchange File Format) file, which translators can edit.

Best practices for translation markup:

• Always use custom IDs (@@keyName) to keep translations stable, even if the original text changes.
• Keep inline text concise to ensure accurate translations.
• Use contextual descriptions (i18n="description|@@id") to help translators understand the meaning.

Example with context:

<p i18n="User greeting message|@@greeting">Hello, User!</p>

Date & number formatting

Different regions follow different formatting standards for dates, times, numbers, and currencies. Angular makes it easy to handle these variations.

Date Formatting

Angular provides the date pipe to automatically format dates according to the user’s locale.

Example:

<p>{{ today | date:'fullDate' }}</p>

For a user in the US (en-US), this will render as:

Monday, March 4, 2025

For a user in France (fr-FR), it will display:

lundi 4 mars 2025

Number & currency formatting

Angular’s decimal and currency pipes adapt to locale settings.

Example:

<p>{{ 1234567.89 | number }}</p>

• In the US, this outputs: 1,234,567.89
• In Germany (de-DE), it appears as: 1.234.567,89

For currency:

<p>{{ 1500 | currency:'EUR' }}</p>

• In en-US, it renders as: €1,500.00
• In fr-FR, it appears as: 1 500,00 €

Right-to-left (RTL) language support

Certain languages, such as Arabic, Hebrew, and Persian, require a Right-to-Left (RTL) layout. Angular makes it easy to accommodate these languages.

How Angular handles RTL:

• When a user selects an RTL language, Angular automatically adjusts:
  
  • Text direction (dir="rtl")
  • Component positioning (alignments switch to the opposite side)
  • Mirroring for UI elements (icons, menus, navigation flows)

Example:
Setting the document direction dynamically based on the locale:

setLanguage(lang: string) 
{  
document.documentElement.dir = lang === 'ar' || lang === 'he' ? 'rtl' : 
'ltr';
}‍

Best practices for RTL support

• Use flexbox and grid layouts instead of hardcoded left and right styles.
• Utilize Angular’s dir attributes rather than manual styling adjustments.
• Test UI with real RTL content to ensure proper alignment.

PWA & mobile compatibility

Progressive Web Apps (PWAs) and hybrid mobile applications require additional considerations for localization.

Handling localization in mobile apps

Since mobile users interact with apps differently than desktop users, you need to ensure:

• Locale detection: Automatically detect and apply the user's preferred language.
• Offline support: Ensure translation files are accessible even when the user is offline.
• Compact UI design: Some languages require more space (e.g., German), while others are shorter (e.g., Chinese).

Using Angular with Capacitor & Cordova

For mobile compatibility, tools like Capacitor and Cordova help manage translations across different platforms.

Example: Detecting the device’s preferred language using Capacitor:

import { Device } from '@capacitor/device';‍
async function getDeviceLanguage() 
{  
const info = await Device.getLanguageCode();  
console.log(info.value); // Returns 'en-US', 'fr-FR', etc.
}

Optimizations for mobile & PWAs

• Use lazy loading to load only the necessary language files.
• Minimize large translation files by splitting translations by module.
• Store frequently accessed translations in IndexedDB for offline support.

Setting up your Angular app for i18n

Installing Angular’s i18n tools

Getting started is a breeze. You just need to add Angular’s i18n capabilities:

ng add @angular/localize

This single command installs all necessary dependencies, including libraries for translations and locale management.

Configuring for multiple languages

Once i18n is enabled, you’ll configure your app to support multiple languages. In angular.json, you’ll define the supported locales (for example, en-US, es-ES, fr-FR).

• Pro Tip: Create a languages folder in your project to store all translation files (XLIFF or JSON), which Angular will use to compile translations into your app at build time.

Localization considerations for hybrid apps

• Hybrid and PWA apps may need additional settings for handling device-specific locales.
• For mobile, ensure proper font and UI adjustments for different language scripts, particularly RTL languages.
• Ionic’s internationalization tools, combined with Angular’s i18n, can help manage localization across web and mobile platforms.
  
  

Limitations

Angular i18n is limited to static translations at build time, so dynamic content or runtime translations require additional solutions like ngx-translate. 

Complex pluralization rules and custom formatting may need extra handling, and there's no built-in translation management system, which can be a challenge for large projects.

Translating your Angular app

Marking strings for translation

With Angular, you can mark strings for translation right in your HTML files. Use the i18n attribute to tag the text that needs to be translated:

<h1 i18n="@@welcomeMessage">Welcome to our app!</h1>

This tells Angular to include the marked text in your translation files.

Managing translation files

Once you’ve extracted all translatable strings, you’ll store them in JSON or XLIFF files for each supported language. Here's an example of how a French translation file might look:

{  "welcomeMessage": "Bienvenue sur notre application!"}

How to extract strings for translation

Angular makes it easy to extract all marked text into a translation file using:

ng extract-i18n

This command scans your templates and generates an XLIFF file with all the strings to be translated.

For mobile applications, JSON-based translations are often preferred over XLIFF due to their flexibility and compatibility with third-party services.

Extending i18n features in Angular

Integrating ngx-translate

If Angular’s built-in i18n doesn’t meet all your needs, consider using ngx-translate for more dynamic and flexible translation management at runtime.

Translation platforms for seamless workflow

Using translation management platforms like Lokalise, Crowdin, or Transifex can make collaboration with translators easy and integrate directly with your Angular app.

Handling localization in hybrid and mobile apps

• For mobile-first experiences, ngx-translate’s ability to load translations dynamically can help avoid frequent app updates just for text changes.
  
  
• Capacitor and Cordova plugins can help detect the user’s preferred locale on mobile devices.

Conclusion

The success of a multilingual app depends on a seamless user experience. At Aubergine, our team of 150+ developers, designers, and AI experts specializes in crafting web and mobile experiences that scale across languages and regions. We combine deep technical expertise with human-centered design principles to ensure localization isn’t an afterthought, but a core part of product strategy.

Through rigorous testing, iterative development, and best-in-class internationalization practices, we help businesses create truly global applications that drive engagement and adoption.

Want to build a multilingual Angular app that feels local everywhere?  Explore our Angular development services or get in touch with us today!