Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

lang attribute in html element #565

Open
lpalli opened this issue Jun 13, 2017 · 19 comments
Open

lang attribute in html element #565

lpalli opened this issue Jun 13, 2017 · 19 comments
Labels
Type: feature request

Comments

@lpalli
Copy link

lpalli commented Jun 13, 2017 

[ ] 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
Copy link
Author

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

@desfero
Copy link

desfero commented Jul 8, 2017

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

@CodeAndWeb
Copy link
Member

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.

@rafa-suagu
Copy link

Some news here?

@ocombe ocombe reopened this May 9, 2018
@rafa-suagu
Copy link

Thanks @ocombe

@yeomann
Copy link

yeomann commented May 18, 2018

+1

12 similar comments
@Roelensdam
Copy link

+1

@bilmiyore
Copy link

+1

@andmoredev
Copy link

+1

@mjoanisse
Copy link

+1

@netsrotr
Copy link

+1

@minawalphonce
Copy link

+1

@mtycholaz
Copy link

+1

@ddtch
Copy link

ddtch commented Jul 23, 2018

+1

@dimshik100
Copy link

+1

@superCarton
Copy link

+1

@kettunen
Copy link

+1

@ghost
Copy link

ghost commented Aug 22, 2018

+1

@ngx-translate ngx-translate locked as spam and limited conversation to collaborators Aug 22, 2018
@ocombe
Copy link
Member

ocombe commented Aug 22, 2018

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Type: feature request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests