Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

lang attribute in html element

See original GitHub issue

[ ] 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]

Issue Analytics

State:
Created 6 years ago
Comments:19

Top GitHub Comments

4reactions

lpallicommented, Jun 15, 2017

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);
  }
}

1reaction

desferocommented, Jul 8, 2017

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