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