Menu

Using Perfect Scrollbar In Angular v2 And Above

November 4th, 2017

Usage Of Perfect #Scrollbar In #Angular via @CsharpCorner  #App #CSSFile

  • 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: – – We can install ngx-perfect-scrollbar package either using npm tool or by using bower tool or with any other tools.
  • Given below is the command to install the above package using bower tool: – – Import the ngx-perfect-scrollbar package in your app module file and refer the PerfectScrollbarModule module in @NgModule => imports section.
  • Till now, we discussed the usage of perfect-scrollbar which provides by ngx-perfect-scrollbar package.
  • 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.

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

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

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

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…

Using Perfect Scrollbar In Angular v2 And Above