Dynamically translate left sidebar

[alexander-myltsev]

I need to translate sidebar dynamically with http://ngx-translate.com . How to do it?

[nealyip]

Rather than using an array of items you may instead importing using a navbar service by subscribing the translated result.

export class DefaultLayoutComponent implements OnDestroy, OnInit {
    public navItems = [];
    private navSrv$: Subscription;
    constructor(private navSrv: NavSrv) {
    }
    ngOnInit(): void {
       this.navSrv$ = this.navSrv.ready.subscribe((navItems)=>{
            this.navItems = navItems;
       });       
    }
    ngOnDestroy(){
       this.navSrv$.unsubscribe();
    }
}

[alexander-myltsev]

@nealyip What is NavSrv? What should be the import for it?

[nealyip]

something like that

import {TranslateService} from '@ngx-translate/core';
import {Observable, of} from 'rxjs';
import 'rxjs/add/operator/map';
import {Injectable} from '@angular/core';

const navItems: Array<any> = [
    {
        name: 'Dashboard',
        key: 'dashboard',
        url: 'dashboard',
        icon: 'icon-speedometer'
    }
];

@Injectable()
export class NavSrv {
    constructor(private ts: TranslateService) {
    }

    translate(items): void {
        for (const item of items) {
            if ('key' in item) {
                const trans = this.ts.instant(`nav.${item.key}`);
                if (trans !== `nav.${item.key}`) {
                    item.name = trans;
                }
            }
            if (item.children && item.children.length > 0) {
                this.translate(item.children);
            }
        }
    }

    ready(): Observable<Array<any>> {
        return of(navItems) // possible to be a http request here
            .map(items => {
                this.translate(items);
                return items;
            });
    }
}

[balajtia]

Hello,

Is it possible a simple way to translate _nav.ts? Something like this:

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

@Injectable()
export class NavSrv {
    constructor(private ts: TranslateService) {
    }

export interface NavData {
  name?: string;
  url?: string;
  icon?: string;
  badge?: any;
  title?: boolean;
  children?: any;
  variant?: string;
  attributes?: object;
  divider?: boolean;
  class?: string;
}

export const navItems: NavData[] = [
    {
        name: ts.getTranslation('Dashboard'),
        url: '/dashboard',
        icon: 'icon-speedometer',
        badge: {
           variant: 'info',
           text: 'NEW'
        }
   }
];

[alexander-myltsev]

Does anybody know how to translate breadcrumbs?

[jameelmohd000]

I am also facing the same issue of how to change the dynamically to as per the localization can anyone help out on this.

[Nyfaristide]

Here is what to do on _nav.ts and DefaultLayoutComponent.ts files

//_nav.ts file
export interface NavData {
  key?: string; //Add a new key
  name?: string;
  url?: string;
  icon?: string;
  badge?: NavBadge;
  title?: boolean;
  children?: NavData[];
  variant?: string;
  attributes?: NavAttributes;
  divider?: boolean;
  class?: string;
  label?: NavLabel;
  wrapper?: NavWrapper;
}

export const navItems: NavData[] = [
  {
    key: 'DASHBOARD.NAME',
    name: '',
    url: '/dashboard',
    icon: 'icon-speedometer',
    badge: {
      variant: 'info',
      text: 'NEW'
    }
  }
]

// DefaultLayoutComponent.ts file

import { navItems } from '../../_nav';
export class DefaultLayoutComponent implements OnDestroy, OnInit {
public navItems = navItems.map(items => {this.translate(items); return items; });

constructor(private ts: TranslateService){}

ngOnInit(): void {
    this.ts.onLangChange.subscribe((event: LangChangeEvent) => {
      this.navItems = navItems.map(items => {this.translate(items); return items; });
    });
  }

translate(item): void {
      if ('key' in item) {
        const trans = this.ts.instant(`${item.key}`);
        if (trans !== `${item.key}`) {
          item.name = trans;
        }
      }
      if (item.children && item.children.length > 0) {
        item.children.map( (child: any) => this.translate(child));
      }
  }
 }

[papaiking]

I did the same way as @Nyfaristide mentioned. I did father by update value of item.name when use changes language, but new value of item.name is not updated in UI.

Is there another way to translate "name" or simple was as: [translate]="KEY" in sidebar

[nidhinkumar06]

@papaiking The issue is because the nav items is an array of objects if u change anything inside u have to intimate Angular that a change has been done.For that you have to use deep clone like below

ngOnInit(): void {
    this.subscription = this.translateService.onLangChange.subscribe(() => {
      const translatedNavs = navItems.map(items => {this.translate(items); return items; });
      this.navItems = [];
      translatedNavs.forEach(val => this.navItems.push(Object.assign({}, val)));
    });
  }

For Ref

https://stackoverflow.com/questions/60504757/app-sidebar-navs-navitems-is-not-updating

#180

[jameelmohd000]

I have did some other ways. But the major problem is in ie it’s not working as expected can you please suggest what I have to change in code level.

On Wed, 9 Sep 2020 at 9:10 PM, nidhinkumar06 ***@***.***> wrote: @papaiking <https://github.com/papaiking> The issue is because the nav items is an array of objects if u change anything inside u have to intimate Angular that a change has been done.For that you have to use deep clone like below ngOnInit(): void { this.subscription = this.translateService.onLangChange.subscribe(() => { const translatedNavs = navItems.map(items => {this.translate(items); return items; }); this.navItems = []; translatedNavs.forEach(val => this.navItems.push(Object.assign({}, val))); }); } For Ref https://stackoverflow.com/questions/60504757/app-sidebar-navs-navitems-is-not-updating #180 <#180> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#123 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGHFKT6Z755OOR2HQZTEWBLSE6OVBANCNFSM4GIIRD4Q> . --

Regards, Mohd Jameel (Time is limit not your imagination)

[alexanderzeillinger]

Does anybody know how to translate breadcrumbs?

Got a solution?

[aninaslyan]

The suggested code examples here worked for me. The case was that <app-sidebar-nav component was not updating navItems input. Inside onLangChange subscription I had to write this.navItems = JSON.parse(JSON.stringify(this.navItems)); to trigger re-rendering. The final code is:

import { Component, OnInit } from '@angular/core';
import { LangChangeEvent, TranslateService } from '@ngx-translate/core';

import { navItems } from '@app/_nav';
import { NavItem } from '@base/interfaces';

interface NavItem extends INavData {
  key?: string;
}

@Component({
  selector: 'app-dashboard',
  templateUrl: './layout.component.html'
})
export class LayoutComponent implements OnInit {
  public navItems = this.translate();

  constructor(
    private translateService: TranslateService,
  ) {
  }

  ngOnInit(): void {
    this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
      this.navItems = this.translate();
      this.navItems = JSON.parse(JSON.stringify(this.navItems));
    });
  }

  translateKeys(item): void {
    if ('key' in item) {
      const trans = this.translateService.instant(`${item.key}`);
      if (trans !== `${item.key}`) {
        item.name = trans;
      }
    }
    if (item.children && item.children.length > 0) {
      item.children.map((child: any) => this.translateKeys(child));
    }
  }

  translate(): NavItem[] {
    return navItems.map(items => {
      this.translateKeys(items);
      return items;
    });
  }
}

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions