Angular 2 Malihu Custom Scrollbar Implmentation

scrollbar.directive.ts

import {Directive, ElementRef, Input, Renderer} from '@angular/core';

import 'jquery-mousewheel';
import 'malihu-custom-scrollbar-plugin';

@Directive({
    selector: "[app-scrollbar]"
})

export class ScrollbarDirective {
    @Input('axis') axis: string = 'y';

    constructor(el: ElementRef, renderer: Renderer) {
        let axis: "x"|"y"|"yx" = <"x"|"y"|"yx"> this.axis;
        $(function() {
            $(el.nativeElement).mCustomScrollbar({
                theme: "mnr-dark",
                axis: axis
            })
        });
    }
}

scrollbar.html

<!-- app-scrollbar -->

<div class="alert-items-wrapper" app-scrollbar> 
  <div *ngFor="let item of items">{{item.name}}</div>
</div>

styles.scss

/*Scrollbar styles*/
/* theme: "dark" */

.mCS-mnr-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: $scrollbar_color; }
.mCS-mnr-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: white; } 
/* and so on... */

/* ---------------------------------------- */

Angular 2 - malihu custom scrollbar fully functional and working implementation:

1.Write the directive and make sure when you use the malihu plugin and jquery to do it like so:
$(function() {
$(el.nativeElement).mCustomScrollbar({
theme: "mnr-dark",
axis: axis
})
});

2.Provide your directive and declare it in an index.ts file like so:
import {ScrollbarDirective} from './scrollbar.directive';

export default [
ScrollbarDirective
];
2.1.this should be declared and provided within your shared.module.ts module according.
3.Feel free to use the scrollbar selector of the directive attribute: "app-scrollbar" wherever needed and enjoy :)
*This implementation does not support dragging items over the scrollbar.