Skip to main content
Version: 2.x

NgxTranslateRoutes

CI npm version Coverage

NgxTranslateRoutes is an Angular library that automatically translates route paths and page titles using @ngx-translate/core.

Features

  • Route translation — automatically replaces URL segments with translated values
  • Title translation — sets document.title from your translation files
  • Language in path — prepends the active locale to URLs (/es/mi-ruta)
  • SSR support — works with Angular Universal / @angular/ssr
  • Query param translation — optionally translates query parameter names
  • Custom strategies — override translation logic per route
  • Multiple cache strategies — localStorage or cookies
  • Standalone & NgModule — works with both app styles

Live Examples

ExampleLink
Standalone app with SSROpen in Stackblitz
NgModule appOpen in Stackblitz

How It Works

The library hooks into Angular's router events. On each NavigationEnd, it reads the active route's data.title and path segments, looks them up in your @ngx-translate translation files, and updates both the URL and the document title — without triggering a new navigation.

User navigates to /about
└─▶ NavigationEnd fires
└─▶ NgxTranslateRoutes reads data.title = 'about'
├─▶ Translates title → 'Sobre Nosotros' (document.title)
└─▶ Translates path → '/sobreNosotros' (location.replaceState)

Compatibility

ngx-translate-routesAngular
2.4.x16.x – 21.x
2.3.x16.x – 21.x
2.0.x – 2.2.x16.x – 19.x
1.4.013.x – 15.x
1.3.08.x – 12.x
1.0.x – 1.2.x7.x – 9.x