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

  1. ------------------------  
  2. ------------------------  
  3. ------------------------  
  4. import { @NgModule } from 'ngx-perfect-scrollbar';   
  5. import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';  
  6.   
  7. const P_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {  
  8.   suppressScrollX: true  
  9. };  
  10.   
  11. @NgModule({  
  12.     imports: [  
  13.          BrowserModule,   
  14.          ------------------------  
  15.          ------------------------  
  16.          ------------------------  
  17.         PerfectScrollbarModule.forRoot(P_SCROLLBAR_CONFIG)  
  18.     ],  
  19.     declarations: [  
  20.          AppComponent,  
  21.          ------------------------  
  22.          ------------------------  
  23.          ------------------------          
  24.     ],  
  25.     providers: [  
  26.         ------------------------  
  27.         ------------------------  
  28.         ------------------------  
  29.     ],  
  30.     exports: [  
  31.         ------------------------  
  32.         ------------------------  
  33.         ------------------------  
  34.     ],  
  35.     entryComponents: [  
  36.         ------------------------  
  37.         ------------------------  
  38.         ------------------------  
  39.     ],  
  40.     bootstrap: [AppComponent]  
  41. })  
  42. 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

  1. import { Component } from '@angular/core';  
  2.    
  3. @Component({  
  4.   selector: 'sample-app',  
  5.   template: `  
  6.     <perfect-scrollbar class="container" [config]="config">  
  7.     <div class="content">  
  8.     123  
  9.      456  
  10.      789  
  11.      012  
  12.     !CName,test  
  13.     !CName,test  
  14.     !CName,test  
  15.     0testsdf, test  
  16.     123456565565656666666666666666, plan44444...  
  17.     </div>  
  18.     </perfect-scrollbar> `  
  19. })  
  20.    
  21. 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.

  1. npm start  
  2. or  
  3. ng serve  
  4. or  
  5. ng s  
  6. or   
  7. 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

  1. import  { Component, ElementRef, DoCheck, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';  
  2.   
  3. import * as Ps from 'perfect-scrollbar';  
  4.   
  5. @Component({  
  6.   selector: 'my-perfect-scrollbar',  
  7.   templateUrl: './my perfect-scrollbar.component.html',  
  8.   styleUrls: ['./ my-perfect-scrollbar.component.scss']  
  9. })  
  10.   
  11. export class MyPerfectScrollbarComponent implements DoCheck, OnDestroy, OnInit {  
  12.   private numberChildNodes = 0;  
  13.   
  14.   constructor(private element: ElementRef) { }  
  15.     
  16.   ngOnChanges(changes: SimpleChanges): void {  
  17.   Ps.update(this.element.nativeElement);  
  18.   }  
  19.   ngDoCheck(): void {  
  20.     Ps.update(this.element.nativeElement);  
  21.   }    
  22.   ngOnDestroy(): void {  
  23.     Ps.destroy(this.element.nativeElement);  
  24.   }  
  25.   ngOnInit() {  
  26.     this.numberChildNodes = this.element.nativeElement.childNodes.length;  
  27.     Ps.initialize(this.element.nativeElement);  
  28.   }  

Step #2 Create a custom css file

my-perfect-scrollbar.component.scss

  1. .my-scroll-container {  
  2.     width: 150px;  
  3.     height: 200px;  
  4.   
  5.     border: 1px solid lightgrey;  
  6. }   

Step #3 Create a custom template file

my-perfect-scrollbar.component.html

  1. <p>  
  2.    my-perfect-scrollbar works!  
  3. </p>  
  4.   
  5. <perfect-scrollbar [config]="config" class="my-scroll-container">  
  6.   <ng-content></ng-content>  
  7. </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

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