From 280f53019fb698a8c717ce202719aad2ef3fd298 Mon Sep 17 00:00:00 2001 From: Yvone-Atieno <95272306+Yvone-Atieno@users.noreply.github.com> Date: Tue, 21 Nov 2023 10:37:18 +0300 Subject: [PATCH 1/4] SEO-177252 Angular Sidebar External-Linking --- README.md | 63 ++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 56 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index fca6436..3ca8236 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,6 @@ # Getting Started with the Angular Sidebar Component -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. - -Refer to the following documentation on the Syncfusion Angular Sidebar component: -https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started - -Check out this online example of the Angular Sidebar component: -https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/default +[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. ## Project prerequisites @@ -15,3 +9,58 @@ Make sure that you have the latest versions of NodeJS and Visual Studio Code in ### How to run this application? 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. + +## Features and benefits + +### Transition / Animation + +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. + +### HTML Side content position + +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. + +### Dock the HTML slide panel content + +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. + +### Toggle sidebar menu + +Bind custom actions to any element (hamburger menu or buttons) to toggle the sidebar. + +### Responsive sidebar + +[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. + +## Related links +[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) + +[Download Free Trial](https://www.syncfusion.com/downloads/angular?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) + +[Pricing](https://www.syncfusion.com/sales/teamlicense?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) + +[Documentation](https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) + +[View Demos](https://github.com/SyncfusionExamples/getting-started-with-the-angular-sidebar-component?utm_source=github&utm_medium=listing&utm_campaign=angular-context-menu-github-samples) + +[Community Forums](https://www.syncfusion.com/forums/angular-js2?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) + +[Online example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/default?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) + +## About Syncfusion Angular UI Components + +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). + +### About Syncfusion + +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. + +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. + +
+ +

+sales@syncfusion.com | www.syncfusion.com | Toll Free: 1-888-9 DOTNET
+

\ No newline at end of file From e3694c1e106bbdd56bb113a78747c5eb5c2f3a39 Mon Sep 17 00:00:00 2001 From: Yvone-Atieno <95272306+Yvone-Atieno@users.noreply.github.com> Date: Tue, 21 Nov 2023 11:06:52 +0300 Subject: [PATCH 2/4] changed control name --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3ca8236..7df039d 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ Bind custom actions to any element (hamburger menu or buttons) to toggle the sid [Documentation](https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) -[View Demos](https://github.com/SyncfusionExamples/getting-started-with-the-angular-sidebar-component?utm_source=github&utm_medium=listing&utm_campaign=angular-context-menu-github-samples) +[View Demos](https://github.com/SyncfusionExamples/getting-started-with-the-angular-sidebar-component?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) [Community Forums](https://www.syncfusion.com/forums/angular-js2?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) From ebd352f47810be9dc5e92c82912f6b0bf52478a8 Mon Sep 17 00:00:00 2001 From: Yvone-Atieno <95272306+Yvone-Atieno@users.noreply.github.com> Date: Wed, 22 Nov 2023 11:42:29 +0300 Subject: [PATCH 3/4] added utm parameter and interlinked --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7df039d..62df991 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ The Angular Sidebar control positions its content to the left or right side of t ### Dock the HTML slide panel content -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. +When you [dock](https://ej2.syncfusion.com/angular/documentation/sidebar/docking-sidebar?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) the side content to give the main content more space, the navigation text is represented as a shortened view of icons. ### Toggle sidebar menu @@ -30,7 +30,7 @@ Bind custom actions to any element (hamburger menu or buttons) to toggle the sid ### Responsive sidebar -[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. +[Auto closing](https://ej2.syncfusion.com/angular/documentation/sidebar/auto-close?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) the Sidebar component’s content allows the main content area to be more readable. ## Related links [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) @@ -51,7 +51,7 @@ Bind custom actions to any element (hamburger menu or buttons) to toggle the sid ## About Syncfusion Angular UI Components -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). +Syncfusion's [Angular UI Components](https://www.syncfusion.com/angular-components?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) 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). ### About Syncfusion From fa4780c0bab102206b285a4d04acdb3efb18d350 Mon Sep 17 00:00:00 2001 From: Yvone-Atieno <95272306+Yvone-Atieno@users.noreply.github.com> Date: Wed, 22 Nov 2023 11:53:05 +0300 Subject: [PATCH 4/4] added video link --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 62df991..1035611 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,8 @@ Bind custom actions to any element (hamburger menu or buttons) to toggle the sid [Online example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/default?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) +[Video Tutorials](https://www.syncfusion.com/tutorial-videos/angular/sidebar?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) + ## About Syncfusion Angular UI Components Syncfusion's [Angular UI Components](https://www.syncfusion.com/angular-components?utm_source=github&utm_medium=listing&utm_campaign=angular-sidebar-github-samples) 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).