Update index.html lang attribute dynamically

Question

This is pretty much an update of AngularJS dynamic lang attribute of html for Angular >= 2.

My application is localized in three languages which the user can change dynamically, without page refresh. I need to set the index.html language attribute accordingly.

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My application</title>
    <base href="/">
</head>
<body>
    <app-root></app-root>
</body>
</html>

I need help only on changing the tag attribute, the application is already localized and supports language change.

This may answer to your needs: https://stackoverflow.com/questions/53990773/angular-universal-html-lang-tag — Loïc, Aug 17 '21 at 07:19
Seems event better but will it match only the root index.html file or any lang attribute in the application? I'm pretty sure i have only one of those but it would still be good to know. — Magnesium, Aug 17 '21 at 07:24

score 1 · Accepted Answer · answered Aug 17 '21 at 07:17

1

You can use document.querySelector('html')?.setAttribute('lang', 'de'); to access the root html element and change the language attribute on it.

answered Aug 17 '21 at 07:17

Octavian Mărculescu

4,312
1
16
29

2

You should rather inject 'DOCUMENT' and use it to update it – Deblaton Jean-Philippe Jun 01 '22 at 07:57

Update index.html lang attribute dynamically

1 Answers1