Translate Menu text using local .json.

[Robert Tabacaru]

Hi, I use menu component inside of side bar component. I have an array of Items of type MenuItemModel

I use ngx-translate for GUI translation. But I couldn't find how can I translate the ejs-menu item text. 

 public menuItems: MenuItemModel[] = [

        {

            text: 'Navigation.Menu.Home', here I want to use the key from my de.json file and return the value.

            iconCss: 'icon-globe icon',

            url: ' '

            // separator: true

        },

];

de.json

{

    "Navigation.Menu.Home": "Home"     

}

here is what I have in html

  <ejs-sidebar id="sidebar-menu" class="dock-menu" #sidebarInstance [enableDock]='enableDock' [width]='width'

                  [dockSize]='dockSize' [mediaQuery]='mediaQuery' [target]='target'> 

                  <div class="main-menu">                      

                      <!-- Menu element declaration -->

                      <ejs-menu #sideBarMenu 

                                [items] = 'menuItems'

                                orientation = 'Vertical'

                                cssClass = 'dock-menu'

                                [hamburgerMode] = true

                                [showItemOnClick] = true

                                (select) = "open($event)">

                            </ejs-menu>                    

                  </div>                 

              </ejs-sidebar>

Thank you in advance!

Regards

Robert

[Arunkumar Devendiran]

Hi Robert, 

We need to validate more on your requirement. And, we will update you the further details on May 22, 2020.   

Regards, 

Arunkumar D 

[Robert Tabacaru]

Should I give more details? 

[Arunkumar Devendiran]

Hi Robert Tabacaru, 

 

We would inform you that currently, we are working on your reported issue with high priority. Meanwhile, if possible, please share more information. So, that we can analyze based on that and provide you a better solution. The information provided would be great help for us to proceed further. 

 

Regards, 

Arunkumar D 

[Robert Tabacaru]

Hi, temporary I found a solution for the translations. I created a template inside of ejs-menu and I'm iterating through the items. In this way I can use the translate pipe for the text. 

I'm not sure if it is a good solution, but for now, it works...

<ejs-sidebar id="sidebar-menu" class="dock-menu" #sidebarInstance [enableDock]='true' 

                  [dockSize]='"0px"'  [target]='".main-content"'> 

                  <div class="main-menu">                      

                      <!-- Menu element declaration -->

                      <ejs-menu #menu 

                                [items] = 'menuItems'

                                orientation = 'Vertical'

                                cssClass = 'dock-menu'

                                [hamburgerMode] = true

                                [showItemOnClick] = true>

                                <ng-template #template let-menuItems="">

                                    <div *ngIf="menuItems.text" style="width:100%;display:flex;justify-content:space-between;">

                                        <span class="{{menuItems.iconCss}}"></span>

                                        <span style="width:100%;">

                                        <a class="e-menu-text e-menu-url" *ngIf="menuItems.url" routerLink={{menuItems.url}}>{{menuItems.text | translate}}</a>

                                        <a *ngIf="!menuItems.url">{{menuItems.text | translate}}</a>

                                        </span>

                                    </div>

                                </ng-template>

                        </ejs-menu>                    

                  </div>                 

              </ejs-sidebar>

[Madhan Venkateshan]

Hi Robert Tabacaru, 

 

Good day to you. 

 

Yes, you can use the solution, it seems good. 

 

Regards, 

Madhan V