core icon indicating copy to clipboard operation
core copied to clipboard

lang attribute in html element

Open lpalli opened this issue 8 years ago • 19 comments

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

lpalli avatar Jun 13 '17 09:06 lpalli

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 avatar Jun 15 '17 09:06 lpalli

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

desfero avatar Jul 08 '17 20:07 desfero

Sorry for not answering the issue for such a long time. We try to do better in the future, promised.

I see the point in your feature request and and easy solution already exists.

We can add the feature if more people ask for it.

CodeAndWeb avatar Mar 28 '18 22:03 CodeAndWeb

Some news here?

rafa-suagu avatar May 09 '18 10:05 rafa-suagu

Thanks @ocombe

rafa-suagu avatar May 09 '18 11:05 rafa-suagu

+1

yeomann avatar May 18 '18 19:05 yeomann

+1

Roelensdam avatar May 25 '18 07:05 Roelensdam

+1

bilmiyore avatar May 31 '18 12:05 bilmiyore

+1

andmoredev avatar Jun 18 '18 19:06 andmoredev

+1

mjoanisse avatar Jun 27 '18 19:06 mjoanisse

+1

netsrotr avatar Jun 28 '18 13:06 netsrotr

+1

minawalphonce avatar Jul 02 '18 11:07 minawalphonce

+1

mtycholaz avatar Jul 19 '18 16:07 mtycholaz

+1

ddtch avatar Jul 23 '18 15:07 ddtch

+1

dimshik100 avatar Jul 29 '18 14:07 dimshik100

+1

superCarton avatar Aug 03 '18 13:08 superCarton

+1

kettunen avatar Aug 16 '18 06:08 kettunen

+1

ghost avatar Aug 22 '18 13:08 ghost

Hey congratulations with your "+1" spam, you made me lock this thread

ocombe avatar Aug 22 '18 13:08 ocombe

Will be automatically updated with the following PR : https://github.com/ngx-translate/core/pull/1574

rbalet avatar Jul 30 '25 06:07 rbalet