Angular 9.1+ Local Direction Query API: getLocaleDirection Example

Angular 9.1+ Local Direction Query API: getLocaleDirection Example

When building apps that are accessed by users across the world, you may need to add support for more than one language and local to target different cultures that's what called internationalization or i18n. Also adapting your app to various locals is called localization or l10n.

For example, if you need to target users in the Arabic world, you need to translate your app to Arabic using various i18n techniques but since Arabic is a Right to Left language you need to change the local direction in your app when needed.

With Angular 9.1, you can query for the current local direction at runtime using the getLocaleDirection method.

Updating your Project to Angular 9.1

Before you can use the local direction API, you need to update to the latest Angular 9.1.

Open your terminal and navigate to your project's folder then run the following command:

$ ng update @angular/cli @angular/core

Getting the Local Direction with Angular 9.1 by Example

This is an example of getting the local direction.

Open the src/app/app.component.ts file and start by adding the following imports:

import { getLocaleDirection } from '@angular/common';
import { LOCALE_ID } from '@angular/core';

Next, you need to inject the LOCALE_ID token as follows:

class App{
  constructor(@Inject(LOCALE_ID) locale) {}
}

Next, you can call the getLocaleDirection method for getting the current local as follows:

getLocaleDirection(locale); // 'rtl' or 'ltr' 

✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also Gitter

✋ Want to master Angular 14? Read our angular tutorial and join our #DailyAngularChallenge where we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.

✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.

❤️ Like our page and subscribe to our feed for updates!