ngCustomScrollbar
Directives are very well-known in the world of angular developers. Every developer knows the power of a Directive. AngularJS has already provided many inbuilt directives which we are using on daily basis.
Why custom scroll bars are useful?
Browser default scroll bar are not so good to see while adjusting them with our web applications theme. So to remove that many of us takes the help of custom scroll bars. We all are familiar with the jQuery mCustomScrollbar.
Why we have created directive for custom scroll bar?
We all know that DOM manipulation in our controller file is a very bad habit while working with angular. That’s why we have created a directive for this so that we can avoid DOM manipulation.
Mandatory file list for using this directive?
Before using this directive one has to inject the below listed files in applications.
- jQuery.js
- jquery.mCustomScrollbar.js
- jquery.mCustomScrollbar.css
- mCSB_buttons.png
- angular.js
- ngCustomScrollbar.js (This is our directive file)
How to implement this directive in your web applications?
One needs to inject the module in their applications module app.
var myMCustomScrollBarDemo = angular.module('myMCustomScrollBarDemo', ['ngMCustomScrollBar']);After following all of the above steps one can now use this directive as an attribute in application.
Below is the code by which one can declare the directive.
<body data-ng-app="myMCustomScrollBarDemo" data-ng-controller="controllername">Using ng-m-custom-scroll
<div class="content" ng-m-custom-scroll>By writing above code in your HTML one can see the custom scroll bar.
In this directive user can also set the properties for the custom scroll bar, For e.g. like theme and other properties.
1) ng-scroll-config
In this attribute user can pass the angular object in this “ng-scroll-config” attribute by which this custom scroll bars properties can be applied.
<div class="content" ng-m-custom-scroll ng-scroll-config="configScroll" ng-custom-scroll-id="DivData1" ng-custom-scroll-class="">OR
<div class="content" ng-m-custom-scroll ng-scroll-config="configScroll" ng-custom-scroll-id="" ng-custom-scroll-class="abc">In Controller one has to set the properties like below
$scope.configScroll = { scrollButtons: { enable: false }, theme: "dark", live: "once" };Using the above one can set the id/class in ng-custom-scroll-id/ng-custom-scroll-class property on which one has to apply the custom scroll bar. Just like id one can pass the class name as well. If one wants to apply this directive on custom id/class this option is useful. In above code the custom scroll bar will not apply on the div which contains the ng-m-custom-scroll attribute, but on that element which is written in the “ng-custom-scroll-id/ng-custom-scroll-class” option.
You can find this ngcustomscrollbar file in my GitHub account.
I am working as a Sr. Software Engineer, with hands on experience in AngularJS, C#, Web API Services, JavaScript, Highchart, D3 charts, Angular 2+.