Using Perfect Scrollbar In Angular v2 And Above

In this article, I am going to show you the usage of perfect-scrollbar using ngx-perfect-scrollbar package.

To use the perfect-scrollbar in our application, we have to follow the below steps:

Step 1 Install the ngx-perfect-scrollbar package

We can install ngx-perfect-scrollbar package either using npm tool or by using bower tool or with any other tools. Below is the command to install ngx-perfect-scrollbar package using npm tool:

npm install ngx-perfect-scrollbar

We can install the same package using bower  tool as well. Given below is the command to install the above package using bower tool:

bower  install ngx-perfect-scrollbar

Step 2 Register the ngx-perfect-scrollbar package

Import the ngx-perfect-scrollbar package in your app module file and refer the PerfectScrollbarModule module in @NgModule => imports section.

app.module.ts

------------------------
------------------------
------------------------
import { @NgModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

const P_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

@NgModule({
    imports: [
         BrowserModule,
         ------------------------
         ------------------------
         ------------------------
        PerfectScrollbarModule.forRoot(P_SCROLLBAR_CONFIG)
    ],
    declarations: [
         AppComponent,
         ------------------------
         ------------------------
         ------------------------
    ],
    providers: [
        ------------------------
        ------------------------
        ------------------------
    ],
    exports: [
        ------------------------
        ------------------------
        ------------------------
    ],
    entryComponents: [
        ------------------------
        ------------------------
        ------------------------
    ],
    bootstrap: [AppComponent]
})
export class CoreModule {
}

Step #3 Use the perfect-scrollbar in your template file

Once the step #2 is done, use the perfect-scrollbar in your template file. So, to use the perfect-scrollbar  in our template file, first we have to create our own component. Find the below sample code to create a sample component and its template file.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'sample-app',
  template: `
    <perfect-scrollbar class="container" [config]="config">
    <div class="content">
    123
     456
     789
     012
    !CName,test
    !CName,test
    !CName,test
    0testsdf, test
    123456565565656666666666666666, plan44444...
    </div>
    </perfect-scrollbar> `
})

export class AppComponent {}

In the above code, I have used [config] directive which overrides the global defaults. Likewise, there are few more pre-defined directives; you can find more documentation at the below link:

https://www.npmjs.com/package/ngx-perfect-scrollbar

Step #4 Compile and Run the application

You can compile and run the application by using the below commands using npm tool.

npm start
or
ng serve
or
ng s
or
npm test

Output

 

Till now, we discussed the usage of perfect-scrollbar which provides by ngx-perfect-scrollbar package.

Now, let us say you want to override the functionality of ngx-perfect-scrollbar package. Is it possible? Why not; absolutely Yes!

Please follow the below steps to override the existing behavior of ngx-perfect-scrollbar package.

Step #1 Create a custom perfect scrollbar component

Create a custom component and override the existing behavior by importing actual "perfect-scrollbar". If you observe the below code snippet, I have imported all the properties of "perfect-scrollbar" by * mark and named it as "Ps" and then used "Ps" alias to override the actual behavior of "perfect-scrollbar".

scroll-container.component.ts

import  { Component, ElementRef, DoCheck, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';

import * as Ps from 'perfect-scrollbar';

@Component({
  selector: 'my-perfect-scrollbar',
  templateUrl: './my perfect-scrollbar.component.html',
  styleUrls: ['./ my-perfect-scrollbar.component.scss']
})

export class MyPerfectScrollbarComponent implements DoCheck, OnDestroy, OnInit {
  private numberChildNodes = 0;

  constructor(private element: ElementRef) { }

  ngOnChanges(changes: SimpleChanges): void {
  Ps.update(this.element.nativeElement);
  }
  ngDoCheck(): void {
    Ps.update(this.element.nativeElement);
  }
  ngOnDestroy(): void {
    Ps.destroy(this.element.nativeElement);
  }
  ngOnInit() {
    this.numberChildNodes = this.element.nativeElement.childNodes.length;
    Ps.initialize(this.element.nativeElement);
  }
}

Step #2 Create a custom css file

my-perfect-scrollbar.component.scss

.my-scroll-container {
    width: 150px;
    height: 200px;

    border: 1px solid lightgrey;
}

Step #3 Create a custom template file

my-perfect-scrollbar.component.html

<p>
   my-perfect-scrollbar works!
</p>

<perfect-scrollbar [config]="config" class="my-scroll-container">
  <ng-content></ng-content>
</perfect-scrollbar>

Step #4 Use the custom perfect scrollbar in your template file

Now, you can use the created custom perfect scrollbar component "my-perfect-scrollbar"  in your template file to get the custom behavior.

Step #5 Compile and run.

Output

In my article, I have shown you the usage of "perfect-scrollbar" irrespective of the data source size. In my next article, I will show you how can we improve the performance of the "perfect scrollbar" by using the lazy loading concept.

Would appreciate your valuable feedback. Happy coding :).