### Options _[ScrollbarIndicatorOptions](https://github.com/shhdharmen/ngx-scrollbar-indicator/blob/master/projects/ngx-scrollbar-indicator/src/lib/interface/scrollbar-indicator-options.ts)_

- You can give options according to you need and modify the behavior. All options are optional. Below is full list of options :

| Option | Type | Description |
| ------------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| enable | boolean | Enable or disable indicator. _Default : true_ |
| changeWhen **deprecated** | EChangeWhen (top/visible) | When the indicator should change the character? When character has reach top of container or as soon as it becomes visible in container. _Default : EChangeWhen.top_ |
| containerHeight | number | height of the container, without this, scrolling won't work. _Default : 500_ |
| theme | ETheme (circular/waterDrop/squareLike) | Visual theme of indicator, totally based on scss. _Default : ETheme.waterDrop_ |
| position **deprecated** | EPosition (auto/top) | Position of indicator, whether to show on top or auto. _Default : EPosition.auto_ |
| showWhen | EShowWhen (always/scroll) | When to show the indicator, always or onscroll/onhover. _Default : EShowWhen.scroll_ |

### Properties

| Name | Type | Description |
| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| all | [ScrollbarIndicatorItemDirective](https://github.com/shhdharmen/ngx-scrollbar-indicator/blob/master/projects/ngx-scrollbar-indicator/src/lib/directive/scrollbar-indicator-item.directive.ts)[] | All Items Array |
| firsts | { [x: string]: ScrollbarIndicatorItemDirective } | JSON Object with first item of each character |
| lasts | { [x: string]: ScrollbarIndicatorItemDirective } | JSON Object with last item of each character |

### Methods

| Name | Parameters | Returns | Description |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| showIndicator | - timer, this will help to maintain frequent calls to this function
- duration (default 500), after which indicator will be hidden | Timer, which can be cleared if you are calling this function again within duration. | Ideally, you shouldn't call this. This will show the indicator. This will add 'show' class to the indicator. And After duration(default 500), if will remove the same. Calling this won't make any sense if showWhen is set to EShowWhen.always |
| goToLetter | - letter, Character to which viewport should be scrolled
- position (default 'first') Element of that character group, first or last | offsetTop of element or -1 if error | Scroll to a specific letter, positioned first of last. Returns the offsetTop if element found, else -1. Works only in Non-IE Browsers. |
| startCalculation | none | void | Call this only if you are changing options in the run-time. This will calculate arrays and characters, based on options. This is called once after ngAfterContentInit hook. |

## Styling

Once you have imported `theme.scss` in `style.scss`, you will hae access to some variables. Be cautios while changing the same:

```scss
$indicator-background-color: #2196f3 !default;
$indicator-background-size: 46px !default;
$bubble-font-size: 16px !default;
$bubble-font-weight: 400 !default;
$indicator-font-color: #fff !default;
$indicator-margin-right: 8px !default;
$indicator-container-right: 105% !default;
$indicator-right: 105% !default;
$indicator-square-like-border-radius: 4px !default;
```

- You can find the styling example on [stackblitz](https://stackblitz.com/edit/ngx-scrollbar-indicator-style?file=src%2Fstyles.scss).

## Badges