CODEWITHSUNDEEP
angularsingle-page-applicationmultilinguallangtransloco
Svt1108
Svt1108

Reputation: 1

How to set correct html property "lang" for multilingual site on Angular with Transloco?

I made multilingual web site (3 languages) on Angular using Transloco. Means, I don't have different page versions or sub domain for every language, I just have all text content in Transloco json files. And it's only one file index.html, where I can set html property "lang". How can I do it for some different languages?

And another one: I translate tags title and description and I set it with different content for every page in SPA. Is it enough or should I do something else? Sorry for maybe stupid question, but it's my first "SEO".

Now it looks like this:

<html lang="en">

So it's not ok. For changing title, for example, I use the updateTitle method and I'm just changing current title value with Transloco.

I have the information about current language in LocalStorage, means I can get "en","it" or "es" via localStorage.getItem("lang"), but how can I place it in <html lang="">?

Upvotes: 0

Views: 278

Answers (1)

Taras Shevhyk
Taras Shevhyk

Reputation: 161

You can use the following code:

import { DOCUMENT } from '@angular/common';

...

enter code here

export class AppComponent {

  constructor(@Inject(DOCUMENT) private document: Document) {}

  setDocumentLang() {
    this.document.documentElement.lang = localStorage.getItem("lang"); 
  }
  ...
}

Upvotes: 0

Related Questions