Creating multilingual menus with ABP and Nebular

Question

Creating multilingual menus with ABP and Nebular

Currently, I am in the process of developing an application using ABP framework version 4.4 and integrating the Nebular theme as opposed to the default basic theme. Amidst various challenges faced during this migration, one particular issue stands out - localizing menu items. In typical HTML, we utilize

{{'::Menu:Home' | abpLocalization }}

for localization purposes. However, this approach proves inefficient when working with Nebular. For instance:

import { NbMenuItem } from '@nebular/theme';

export const MENU_ITEMS: NbMenuItem[] = [
  {
    title: '"::Menu:Home" | abpLocalization',
    icon: 'home-outline',
    link: '/',
    home: true,
  },
];

Despite incorporating the ABP localization pipe into the title property, the UI displays plain text instead of the localized content. It is worth noting that Nebular's menu title property exclusively accepts string values, posing a challenge on how to effectively localize menu items. Any suggestions or workarounds would be greatly appreciated.

angular typescript abp-framework nebular

Answer 1

Answer №1

To ensure the keys are translated before being passed to the menu component, utilize the localization service:

import {
  LocalizationService
} from '@abp/ng.core';

class MyClass {
  public readonly MENU_ITEMS: NbMenuItem[] = [{
    title: this.localizationService.instant('::Menu:Home'),
    icon: 'home-outline',
    link: '/',
    home: true,
  }];

  constructor(private localizationService: LocalizationService) {}
}

Keep in mind that exporting a const directly from the file's root is not possible due to this approach.

To address this issue, you can implement the following solution:

import { Component. OnInit } from '@angular/core';
import { LocalizationService } from '@abp/ng.core';
import { MENU_ITEMS } from './pages-menu';

@Component({
    selector: 'app-sidebar-menu',
    template:  <nb-menu [items]="menu"></nb-menu> ,
    styleUrls: ['./sidebar-menu.component.scss']
})
export class SidebarMenuComponent implements OnInit {
    menu: NbMenuItem[];

    constructor(private localizationService: LocalizationService) {}

    ngOnInit(): void {
        const menuTranslated = [...MENU_ITEMS];
        menuTranslated.forEach(item => item.title = this.localizationService.instant(item.title));
        this.menu = menuTranslated;
    }
}

In your ./pages_menu file, construct the menu using translation keys.

Answer 2

To ensure the keys are translated before being passed to the menu component, utilize the localization service:

import {
  LocalizationService
} from '@abp/ng.core';

class MyClass {
  public readonly MENU_ITEMS: NbMenuItem[] = [{
    title: this.localizationService.instant('::Menu:Home'),
    icon: 'home-outline',
    link: '/',
    home: true,
  }];

  constructor(private localizationService: LocalizationService) {}
}

Keep in mind that exporting a const directly from the file's root is not possible due to this approach.

To address this issue, you can implement the following solution:

import { Component. OnInit } from '@angular/core';
import { LocalizationService } from '@abp/ng.core';
import { MENU_ITEMS } from './pages-menu';

@Component({
    selector: 'app-sidebar-menu',
    template:  <nb-menu [items]="menu"></nb-menu> ,
    styleUrls: ['./sidebar-menu.component.scss']
})
export class SidebarMenuComponent implements OnInit {
    menu: NbMenuItem[];

    constructor(private localizationService: LocalizationService) {}

    ngOnInit(): void {
        const menuTranslated = [...MENU_ITEMS];
        menuTranslated.forEach(item => item.title = this.localizationService.instant(item.title));
        this.menu = menuTranslated;
    }
}

In your ./pages_menu file, construct the menu using translation keys.

Creating multilingual menus with ABP and Nebular

Answer №1

Similar questions

Tips for customizing components in React-Table by overriding default columns

Utilize the optional chaining feature when accessing properties that may be optional

When it comes to TypeScript, there is a limitation in assigning a value to an object key with type narrowing through the

``Is there a specific scenario where the use of getInitialProps is recommended when automatically redirecting from one

I encountered an error in my Spring Boot application where I received a TypeError: Cannot read properties of undefined (reading '0') related to the angular.min.js file at line 129

Exploring the dynamics of parent and child components in Angular

Limitations of MaterialUI Slider

TypeORM is failing to create a table upon initialization

How to transfer a value from an observable to a (click) event handler in Angular2

Utilizing ngx-bootstrap Modal for Data Transfer to Component

Transfer the view encapsulation id selector to a CSS class within an @Input directive passed down from the parent component

Encountering a Nuxt error where properties of null are being attempted to be read, specifically the 'addEventListener' property. As a result, both the default

What is the method for retrieving array values from an attribute?

Guide on how to upload files to a web server using Angular frontend only

Exploring TypeScript Generics and the Concept of Function Overloading

Exploring nested contexts in react testing library with renderHook

Utilizing the Teams web app within my customized electron application

Tips for sending arguments to translations

Issue with implementing JQuery datepicker within Angular 7 CLI application

Using template variable in Angular5 to create a dependant dropdown feature