November 4th, 2017
- 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.
@CsharpCorner: 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:
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
Using Perfect Scrollbar In Angular v2 And Above