How to change menu orientation based on device

Question

How to change syncfusion menu orientation based on device?

Sample - https://stackblitz.com/edit/angular-ta4vpu?file=app%2Fapp.module.ts

Answer 1

We have checked your reported requirement and it can be achievable in our Menu. For your convenience, we have prepared a sample Please find the link below.

Sample link: https://stackblitz.com/edit/angular-thfhhx-kalrsu?file=app.component.ts

CODE SNIPPETS:

<button ejs-button (click)="btnClick()">Change Orientation <ejs-menu #menu [items]='data' [fields]='menuFields' (created)='menuCreated()'>

menuCreated(): void { if (Browser.isDevice) { this.menuObj.orientation = 'Vertical' } } btnClick(args) { this.menuObj.orientation = this.menuObj.orientation === 'Horizontal' ? 'Vertical' : 'Horizontal'; }

Please refer the below help link for more details regarding this functionality.

Demo Link: https://ej2.syncfusion.com/angular/demos/#/material/menu/hamburger-mode

Documentation Link: https://ej2.syncfusion.com/angular/documentation/menu/how-to/change-orientation/

API Link: https://ej2.syncfusion.com/angular/documentation/api/menu/#orientation