Categories

Thursday, March 28, 2024
#919814419350 therichposts@gmail.com
Angular 8Angular 9Angular6Angular7

Angular Slimscroll Bar

How to implement Slimscroll in Angular 7?

Angular Slimscroll Bar - The Rich Post

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:

Angular SlimScroll Bar

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..

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.