📜 Angular Horizontal Scroller
Provide an angular component for a scrolling container horizontal.
🔗 Demo
📦 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
-
Import the
AngularHorizontalScroll
in your module or standalone component:import { AngularHorizontalScroll } from "angular-horizontal-scroll";
-
Include your content within the
horizontal-scroll
tags:<horizontal-scroll> <!-- Your content here --> </horizontal-scroll>
-
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
🤝 Contributing
Contributions are welcome! If you find any issues or would like to add new features, feel free to open a pull request.