Localizing the navigation?

[blissi]

Hallo,
how can I localize the navigation of the AppSidebarNav? I tried two approaches, but both failed:

• Create a new navigation-array. Through the data binding, this should fully replace all existing navigation items in the UI - but that's not the case: the new items are added to the existing items.
• Update the "name"-property of the existing navigation items in the array. This works for regular navigation items, but not for titles: the titles keep their previous text.

[xidedix]

Hi @blissi
navItems array is located here:
https://github.com/coreui/coreui-free-angular-admin-template/blob/master/src/app/_nav.ts
if you need some more customization, you can create a wrapper around it

[blissi]

@xidedix oh sorry, I didn't explain it well enough what I am trying to do...I have a language toggle in my application that allows the user to update the current language on-the-fly. That works fine for the rest of my app, but I couldn't get the navigation to work properly. I tried the two approaches that I described in my first post.

[burntblark]

@blissi I have the same problem trying to update the navigation menu dynamically. My use case is that my menu items come from the server. So based on the content I am viewing, the menu may be different.

Been watching for update on this since you posted this. By any chance, have you found a work around for this?

[burntblark]

@blissi Spent sometime on the codes. Found what may be wrong. The host replacement routine Replace is messing this up for the app-sidebar-nav-item component or so. It works as expected on my project now. Thought I should share it with you. I'd do a pull request so you could check it.

[blissi]

@burntblark Thanks that you shared your changes with me. It doesn't work, though: when the user switches the language, the regular navigation items change their text, but the title items don't do (as a side note: I implemented language switch with my second approach - that is, the navigation items in _nav.ts are patched, no new navigation structure created).

[steolits]

Hi everyone! I'm trying to update the navigation menu dynamically but it doesn't work. Menu data comes from server. Everytime that the application received the new menu data, the component adds the new menu after the old. How can I fix this? Thanks!

-- core ui versions:
"@coreui/angular": "^2.0.0-rc.1",
"@coreui/coreui": "^2.0.2",

[gabord]

Hi!
I am experiencing the same problem. I managed to solve the i18n of items by adding a key property to the _nav.ts, on which the name property will be filled when changing languages. However, as others said, the titles remain the same - that's because these items got created once on init in AppSidebarNavTitleComponent. An OnChanges-type check and reloading / re-rendering would be nice!

[Azuka]

Hi. I'm experiencing this same issue with duplicate menu items. What's the best way to resolve?

[derdeka]

+1

[Azuka]

What I did for the duplicate issue was create my own components locally. See https://gist.github.com/Azuka/b4837da81614826e655c60dcdbf3d40b. I haven't seen any issues so far. It seems to have something to do with multiple elements in a template with ngFor.

[nealyip]

Hallo,
how can I localize the navigation of the AppSidebarNav? I tried two approaches, but both failed:

• Create a new navigation-array. Through the data binding, this should fully replace all existing navigation items in the UI - but that's not the case: the new items are added to the existing items.
• Update the "name"-property of the existing navigation items in the array. This works for regular navigation items, but not for titles: the titles keep their previous text.

For the titles,
Here's a simple reproduction.

src/app/app.component.html
<app-sidebar-nav [navItems]="navItems"></app-sidebar-nav>

src/app/app.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    title = 'app';
    navItems = [
        {
            title: true,
            name: 'Transactions'
        },
        {
            name: 'List',
            url: 'users/list',
            // icon: 'icon-list'
        }
    ];

    ngOnInit(): void {
        let cnt = 0;
        setInterval(() => {
            cnt++;
            this.navItems[0].name = '' + cnt;
            this.navItems[1].name = '' + cnt;
        }, 1000);
    }


}

src/app/app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {AppSidebarModule} from '../../projects/coreui/angular/src/lib/sidebar';
import {RouterModule} from '@angular/router';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppSidebarModule,
        RouterModule.forRoot([])
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

The title one won't get incremented.

It's likely because of the AppSidebarNavTitleComponent using a simple property assignment instead of an angular template without property change detection.
const name = this.renderer.createText(this.title.name);

[nealyip]

For those whom may concern, it may be an ugly fix

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    title = 'app';
    navItems = [
        {
            title: true,
            name: 'Transactions',
            class: 'nav-transactions-title'
        },
        {
            name: 'List',
            url: 'users/list'
        }
    ];

    ngOnInit(): void {
        let cnt = 0;
        setInterval(() => {
            cnt++;
            this.navItems[0].name = '' + cnt;
            this.navItems[1].name = '' + cnt;

            document.getElementsByClassName('nav-transactions-title').item(0).innerHTML = this.navItems[0].name;
        }, 1000);
    }
}

Directly update the content by dom method.

[andrejsn]

I have the same problem.
Only solved with DOM manipulation

in *.component.html

... <a>... (click)="transalteTo('ru') ...>Русский</a> <a>... (click)="transalteTo('de') ...>Deutsh</a> <a>... (click)="transalteTo('en') ...>English</a>

in *.component.ts
`
translateTo(language:string):void {
console.log('switch to: ' + language);

...translateService.use(language)...

// as an example, we change only the first menu item
var menu:Element = document.getElementsByTagName('app-sidebar-nav-link').item(0);
const menuTextOriginalHTML = menu.innerHTML;
console.log(menuTextOriginalHTML); // see original HTML

// set new i18n value
menu.innerHTML = `<!--bindings={
"ng-reflect-ng-switch-case": "disabled"

}--> ### HERE i18n VALUE ### `;

...

}
`

For a change, all menu items use foreach(){...}