How to hide the Sidebar by default when page loaded?
Requirement
Hide the Sidebar by default when page loaded.
Solution
We can render the JavaScript Sidebar in closed state by default by using any of the following ways.
Way 1:
We can set the type property as (Push, Slide, Over) to render the Sidebar in closed state on initial rendering. Please check the below sample for your reference.
Sample: https://stackblitz.com/edit/sidebar-hide1?file=main.ts
Way 2:
Dynamically, updating the isOpen property as false in the created event as shown below.
function onCreate() { // Hide the sidebar element on creation using isOpen property this.sidebarInstance.isOpen = false; this.sidebarInstance.dataBind(); } |
Sample: https://stackblitz.com/edit/sidebar-hide2
Way 3:
Calling hide method in the created event as shown below.
function onCreate() { // Hide the sidebar element on creation using hide method this.sidebarInstance.hide(); } |
Sample: https://stackblitz.com/edit/sidebar-hide3
Refer to the below links to know more about Sidebar component.
Documentation: https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started
API reference: https://ej2.syncfusion.com/angular/documentation/api/sidebar/
Live demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/default
Conclusion
I hope you enjoyed learning about how to hide the Sidebar by default when page loaded
You can refer to our JavaScript Sidebar feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Sidebar example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
