You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# Getting Started with the Angular Sidebar Component
2
2
3
-
A quick-start project to create a new Angular application using the Angular CLI toolchain and add the Syncfusion Sidebar component to it. This project contains simple code customization, as well as some important features, like toggling, and integration with other components.
4
-
5
-
Refer to the following documentation on the Syncfusion Angular Sidebar component:
[Angular Sidebar](https://www.syncfusion.com/angular-components/angular-sidebar?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) is an expandable and collapsible component that typically acts as a side container to place primary or secondary content alongside the main content. A quick-start project to create a new Angular application using the Angular CLI toolchain and add the Syncfusion Sidebar component to it. This project contains simple code customization, as well as some important features, like toggling, and integration with other components.
10
4
11
5
## Project prerequisites
12
6
@@ -15,3 +9,58 @@ Make sure that you have the latest versions of NodeJS and Visual Studio Code in
15
9
### How to run this application?
16
10
17
11
To run this application, you need to clone the `getting-started-with-the-angular-sidebar-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `ng serve` command.
12
+
13
+
## Features and benefits
14
+
15
+
### Transition / Animation
16
+
17
+
Different types of slide-out content in the Angular Sidebar component give users the flexibility to view or hide content over or above the main content by pushing, sliding, or overlaying it.
18
+
19
+
### HTML Side content position
20
+
21
+
The Angular Sidebar control positions its content to the left or right side of the main content area. This option allows the placement of two sidebars in a page, both at the left and right, to show primary and secondary content simultaneously.
22
+
23
+
### Dock the HTML slide panel content
24
+
25
+
When you [dock](https://ej2.syncfusion.com/angular/documentation/sidebar/docking-sidebar) the side content to give the main content more space, the navigation text is represented as a shortened view of icons.
26
+
27
+
### Toggle sidebar menu
28
+
29
+
Bind custom actions to any element (hamburger menu or buttons) to toggle the sidebar.
30
+
31
+
### Responsive sidebar
32
+
33
+
[Auto closing](https://ej2.syncfusion.com/angular/documentation/sidebar/auto-close) the Sidebar component’s content allows the main content area to be more readable.
34
+
35
+
## Related links
36
+
[Learn More about Angular Sidebar](https://www.syncfusion.com/angular-components/angular-sidebar?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples)
[Suggest a feature or report a bug](https://www.syncfusion.com/feedback/angular?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples)
Syncfusion's Angular UI Components library is the only suite that you will ever need to build an application since it contains over 80 high-performance, lightweight, modular, and responsive UI Components in a single package. In addition to Sidebar, we provide popular Angular Components such as [DataGrid](https://www.syncfusion.com/angular-components/angular-grid?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [Charts](https://www.syncfusion.com/angular-components/angular-charts?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [Scheduler](https://www.syncfusion.com/angular-components/angular-scheduler?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [Diagram](https://www.syncfusion.com/angular-components/angular-diagram?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), and [Word Processor](https://www.syncfusion.com/angular-components/angular-word-processor?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples).
55
+
56
+
### About Syncfusion
57
+
58
+
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
59
+
60
+
Today, we provide 1800+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [Angular](https://www.syncfusion.com/angular-components?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [React](https://www.syncfusion.com/react-components?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [Vue](https://www.syncfusion.com/vue-components?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [WPF](https://www.syncfusion.com/wpf-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples)). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.
0 commit comments