how to view content alongside sidebar at main-content

[Muhamed Taha]

I used Sidebar component and inside it used Menu component, I want when I hover ex. Overview > All Data and click on it

view content of All Data alongside Sidebar component.

app.component.ts

app.component.html

Rendering Content

[Sangeetha Priya Murugan]

 

Hi Muhamed, 

 

Thanks for contacting Syncfusion support. 

 

We have checked your reported requirement in our end and it can be achievable, by using the router link for menu items using template property with CSS customization in it. Please find the below code example. 

 

CODE SNIPPETS: 

 

@Component({ 

selector: 'my-app', 

template: ` 

..// 

<ejs-menu #menu id='menu' [items]='menuItems' (open)="open($event)"> 

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

        <a style="display:block" class="e-custom"[routerLink]="menuItems.path"> 

            {{ menuItems.text }} 

        </a> 

    </ng-template> 

</ejs-menu> 

 ..// 

<router-outlet></router-outlet> 

` 

}) 

 

 

For your convenience, we have prepared the Menu sample with sidebar based on our suggestion. Please find the link below. 

 

Sample Link: https://stackblitz.com/edit/angular-e7ee1p-qzxxsd?file=app%2Fapp.component.ts 

 

Could you please check the above details and get back to us, if you need any further assistance on this? 

 

Regards, 

Sangeetha M