Angular 5 localize-router set route with country/lang code

Question

Here is my problem. I have to set up routing in Angular so that in URL there will be a country code and a language. for example

https://example.com/usa/en

The tricky part is that this localization parts can change so I have a button to switch country and language so it will be /gb/en or /usa/fr.

How can I get it working like this using localize-router and ngx-translate.

Any help much appreciated.

Do you need this country/language code for each route or just as an entry point of your app ? — Thierry Falvo
– Thierry Falvo, Commented Aug 24, 2018 at 9:46
each route needs to have this combo. This is a requirement for SEO purposes - we are using Angular Universal server-side rendering. — Piotr Smyda
– Piotr Smyda, Commented Aug 24, 2018 at 9:50
You can use the router for this without using localize router. by adding root urls are like this route: [{path: ':country/:lang', children[ < YOUR OTHERS COMPONENTS GOES HERE />]}] — AlokeT
– AlokeT, Commented Aug 27, 2018 at 15:59
@PiotrSmyda: For your additional information, medium.com/frontend-fun/… — Anjana Silva
– Anjana Silva, Commented Sep 3, 2018 at 7:59

Kalpesh Shingala · Accepted Answer · 2018-08-28 09:47:57Z

2

+50

Pardon me if I got your question wrong, but if I understand it correctly you can follow below approach:

In your AppRoutingModule configure routes as below:

const routes: Routes = [
  { 
     path:'' , pathMatch: 'full', component: SomeComponent,
     children: [
        { path: ':country-code/:lang-code' , component: SomeOtherComponent }
     ]
  }
]

You can now redirect by your button click event and it changes country-code and lang-code accordingly and you can retrieve these values in your SomeOtherComponent to perform related tasks.

answered Aug 28, 2018 at 9:47

Kalpesh Shingala

3762 gold badges6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 5 localize-router set route with country/lang code

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related