📜 Angular Horizontal Scroller

Provide an angular component for a scrolling container horizontal.

🔗 Demo

Live Example

📦 Install

npm install angular-horizontal-scroll

For other angular versions:

Version	Tag
16	npm install angular-horizontal-scroll@v16-lts
15	npm install angular-horizontal-scroll@v15-lts

⚙️ Usage

1. Import the AngularHorizontalScroll in your module or standalone component:

   import { AngularHorizontalScroll } from "angular-horizontal-scroll";

2. Include your content within the horizontal-scroll tags:

   <horizontal-scroll>
     <!-- Your content here -->
   </horizontal-scroll>

3. Customize the component's appearance by adjusting the containerStyles API.

   import { ContainerStyles } from "angular-horizontal-scroll";

✨ API

⌨️ Component Parameters

Param	Type	Default	Description
[containerStyles]	ContainerStyles	-	Styles for container
[buttonStyles]	ButtonStyles	-	Styles for buttons
[headerTitleTemplate]	string | TemplateRef	-	The title for the container
(onLeftBtnClick)	EventEmitter	-	Left button click callback
(onRightBtnClick)	EventEmitter	-	Right button click callback
(onScroll)	EventEmitter	-	Scroll callback
[scrollAmount]	'auto' | 'full' | number	'auto'	Control the scroll amount.
[scrollButtonPosition]	'center' | 'top right'	'center'	The placement of scrolls buttons
[scrollButtonTemplate]	TemplateRef | undefined	-	Custom scroll button
[showScrollbar]	boolean	false	Option to show scrollbar

🎨 Custom Styles

Container Styles

Property	Type	Default	Description
containerGap	number	0	Set the gap between header and container in px
elementsGap	number	16	Set the gap between elements within the component in px
firstAndLastElementGap	number	16	Set the gap between the first and last element and container in px
reverseDirection	boolean	false	Reverse direction of elements displayed
inlineStyle	string	""	Set the inline styles for container

Button Styles

Property	Type	Default	Description
arrowColor	string	'#fff'	Set the color of the arrow
btnBgColor	string	'#0000004d'	Set the background color of the button
btnSize	number	16	Set the size of the button in px
inlineStyle	string	""	Set the inline styles for buttons

📄 Changelog

see Latest change

🤝 Contributing

Contributions are welcome! If you find any issues or would like to add new features, feel free to open a pull request.