Angular Component to add scroll indicator.
Live Demo : https://mraghuram3.github.io/#/ngx-scroll-indicator
Install it with npm
$ npm install ngx-scroll-indicator --save
Import NgScrollIndicatorModule
in the root module
import { NgScrollIndicatorModule } from 'ngx-text-highlight';
@NgModule({
imports: [
// ...
NgScrollIndicatorModule.forRoot(),
...
]
})
In your template
<ng-scroll-indicator-component [container]="'container'" [progressbar]="'bar'"></ng-scroll-indicator-component>
<div ngScrollDirective style="height:500px;overflow:scroll;">
....
....
</div>
-
[container]: string.
The css class name to be apllied to the container to modift the default style. Define the css class in main style sheet of the application
-
[progressbar]: string.
The css class name to be apllied to the container to modift the default style. Define the css class in main style sheet of the application
-
ngScrollDirective
Add the directive to the div for which the scroll indicator should track. Specify fixed height to the div and add overflow: scroll paramter to it.
** example css to override the default styling of progress bar **
.container {
background: #ccc !important;
}
.bar {
background: yellow !important;
}
MIT © Raghu Ram M