Angular Slimscroll Bar

Hello to all, welcome to therichpost.com. In this post, I am going to implement Angular Slimscroll Bar in my Angular 9 application.

I am feeling happy to share this post. I am doing this in Angular 9.

Here you can check the working example:

It is very easy to add slimscroll bar into your Angular application.

Here are the simple and easy steps, need to follow to implement Angular SlimScroll Bar:

1. Very first, you need to run below command into you terminal:

with this slimscroll package with install into your Angular application.

npm install ngx-slimscroll

2. After this, you can update your app.module.ts file with below code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { NgSlimScrollModule, SLIMSCROLL_DEFAULTS } from 'ngx-slimscroll';
import { CommonModule } from '@angular/common';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
  BrowserModule,
  BrowserAnimationsModule,
  NgSlimScrollModule,
  CommonModule,
  ],
  providers: [ {
      provide: SLIMSCROLL_DEFAULTS,
      useValue: {
        alwaysVisible: false,
        gridOpacity: '0.2', barOpacity: '0.5',
        gridBackground: '#fff',
        gridWidth: '6',
        gridMargin: '2px 2px',
        barBackground: '#fff',
        barWidth: '20',
        barMargin: '2px 2px'
      }
    }],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. After this, you can update your app.component.ts file with below code:

import {Component, EventEmitter} from '@angular/core';
import { ISlimScrollOptions, SlimScrollEvent } from 'ngx-slimscroll';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  opts: ISlimScrollOptions;
  scrollEvents: EventEmitter<SlimScrollEvent>;

    ngOnInit() {
    
  this.scrollEvents = new EventEmitter<SlimScrollEvent>();
    this.opts = {
      position?: "right"; // left | right
      barBackground?: "red"; // #C9C9C9
      barOpacity?: "0.8"; // 0.8
      barWidth?: "10"; // 10
      barBorderRadius?: "20"; // 20
      barMargin?: "0"; // 0
      gridBackground?: "#d9d9d9"; // #D9D9D9
      gridOpacity?: "1"; // 1
      gridWidth?: "2"; // 2
      gridBorderRadius?: "20"; // 20
      gridMargin?: "0"; // 0
      alwaysVisible?: true; // true
      visibleTimeout?: 1000; // 1000
      scrollSensitivity?: 1; // 1

    }

    this.play();
    }

}

4. Finally, you need to add below code into your app.component.html file:

Now you will see working code with this.

<style>
.scroll-window {
    width: 100%;
    height: 300px;
    font-size: 13px;
    padding: 10px;
    font-size: 15px;
    line-height: 20px;
    color: #000;
}
</style>
<div class="jumbotron text-center">
  <h1>Angular Slim Scroller Bar
</h1>
</div>
<div class="scroll-window" slimScroll [options]="opts" [scrollEvents]="scrollEvents">
  <p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.

For example, when designing a brochure or book, a designer will insert Lorem ipsum text if the real text is not available. The Lorem ipsum text looks real enough that the brochure or book looks complete. The book or brochure can be shown to the client for approval.

The important factor when using Lorem ipsum text is that the text looks realistic otherwise the brochure or book will not look very good. Lorem Ipsum is dummy text which has no meaning however looks very similar to real text.</p>
<p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.

For example, when designing a brochure or book, a designer will insert Lorem ipsum text if the real text is not available. The Lorem ipsum text looks real enough that the brochure or book looks complete. The book or brochure can be shown to the client for approval.

The important factor when using Lorem ipsum text is that the text looks realistic otherwise the brochure or book will not look very good. Lorem Ipsum is dummy text which has no meaning however looks very similar to real text.</p>
<p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.

For example, when designing a brochure or book, a designer will insert Lorem ipsum text if the real text is not available. The Lorem ipsum text looks real enough that the brochure or book looks complete. The book or brochure can be shown to the client for approval.

The important factor when using Lorem ipsum text is that the text looks realistic otherwise the brochure or book will not look very good. Lorem Ipsum is dummy text which has no meaning however looks very similar to real text.</p>
<p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.

For example, when designing a brochure or book, a designer will insert Lorem ipsum text if the real text is not available. The Lorem ipsum text looks real enough that the brochure or book looks complete. The book or brochure can be shown to the client for approval.

The important factor when using Lorem ipsum text is that the text looks realistic otherwise the brochure or book will not look very good. Lorem Ipsum is dummy text which has no meaning however looks very similar to real text.</p>
<p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.

For example, when designing a brochure or book, a designer will insert Lorem ipsum text if the real text is not available. The Lorem ipsum text looks real enough that the brochure or book looks complete. The book or brochure can be shown to the client for approval.

The important factor when using Lorem ipsum text is that the text looks realistic otherwise the brochure or book will not look very good. Lorem Ipsum is dummy text which has no meaning however looks very similar to real text.</p>
<p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.

For example, when designing a brochure or book, a designer will insert Lorem ipsum text if the real text is not available. The Lorem ipsum text looks real enough that the brochure or book looks complete. The book or brochure can be shown to the client for approval.

The important factor when using Lorem ipsum text is that the text looks realistic otherwise the brochure or book will not look very good. Lorem Ipsum is dummy text which has no meaning however looks very similar to real text.</p>
</div>

And you are done with Angular SlimScroll Bar. If you have any query related to this post, then please do comment below or ask questions.

Thank you..