How to configure html's lang attribute depending on the URL using angular SSR

Question

I'm trying to migrate my Angular App to an Angular SSR for better SEO. I need to provide the html's lang attribute depending on the route :

• If the route starts with /fr, set it to fr
• If the route starts with /en, set it to en

I think I have to use this in my AppComponent :

public readonly document = inject(DOCUMENT);

constructor() {
    this.document.documentElement.lang = myLanguage;
}

But I have no idea how to retrieve the route to know which language I should set.

Answer 1

...
  private document = inject(DOCUMENT);
  private router = inject(Router);
  private platformId = inject(PLATFORM_ID);

  constructor() {
    if (isPlatformBrowser(this.platformId)) {
      this.router.events
        .pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd))
        .subscribe((event: NavigationEnd) => {
          this.setLangFromUrl(event.urlAfterRedirects);
        });
    } else {
      // SSR: no router events, so use the initial URL
      const url = this.router.url;
      this.setLangFromUrl(url);
    }
  }

  private setLangFromUrl(url: string) {
    const lang = url.startsWith('/fr') ? 'fr' : url.startsWith('/en') ? 'en' : 'en';
    this.document.documentElement.lang = lang;
  }

...