Core: lang attribute in html element

Created on 13 Jun 2017 · 19Comments · Source: ngx-translate/core

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[X] feature request

Current behavior
The html element in the DOM don't has the lang attribute.

Expected/desired behavior
Having the lang attribute in html element.
The DOM must look like:
<html lang="en">

What is the motivation / use case for changing the behavior?
Be more standard on language identification for SEO or other tools.

ngx-translate version: 6.0.1
Angular version: 4.0.1
Browser: [all]

feature request

Source

lpalli

Most helpful comment

As wokaround it's possible to subscribe to onLangChange in the app.component and modify the DOM via ElementRef.

My code:

import { Component, ElementRef, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'gp-app-root',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {

  /**
   * The onLangChange subscription to update the component if the language change.
   * @type {any}
   */
  onLangChange: Subscription = undefined;

  /**
   * The constructor.
   * 
   * @param el the current element reference
   * @param translate the translate service
   */
  constructor(public el: ElementRef, public translate: TranslateService) { }

  ngOnInit() {
    this.updateLanguage();
    this.onLangChange = this.translate.onLangChange.subscribe(() => {
      this.updateLanguage();
    });
  }

  ngOnDestroy() {
    if (this.onLangChange !== undefined) {
      this.onLangChange.unsubscribe();
    }
  }

  /**
   * Update the language in the lang attribute of the html element.
   */
  updateLanguage(): void {
    const lang = document.createAttribute('lang');
    lang.value = this.translate.currentLang;
    this.el.nativeElement.parentElement.parentElement.attributes.setNamedItem(lang);
  }
}

lpalli on 15 Jun 2017

👍4

All 19 comments

As wokaround it's possible to subscribe to onLangChange in the app.component and modify the DOM via ElementRef.

My code:

import { Component, ElementRef, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'gp-app-root',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {

  /**
   * The onLangChange subscription to update the component if the language change.
   * @type {any}
   */
  onLangChange: Subscription = undefined;

  /**
   * The constructor.
   * 
   * @param el the current element reference
   * @param translate the translate service
   */
  constructor(public el: ElementRef, public translate: TranslateService) { }

  ngOnInit() {
    this.updateLanguage();
    this.onLangChange = this.translate.onLangChange.subscribe(() => {
      this.updateLanguage();
    });
  }

  ngOnDestroy() {
    if (this.onLangChange !== undefined) {
      this.onLangChange.unsubscribe();
    }
  }

  /**
   * Update the language in the lang attribute of the html element.
   */
  updateLanguage(): void {
    const lang = document.createAttribute('lang');
    lang.value = this.translate.currentLang;
    this.el.nativeElement.parentElement.parentElement.attributes.setNamedItem(lang);
  }
}

lpalli on 15 Jun 2017

👍4

Maybe can be done as a new parameter to the module (what do you think about reflectInHtml)