Ram Ram - 4 years ago 205
jQuery Question

Angular2 scrollable content

I used perfect scrollbar https://noraesae.github.io/perfect-scrollbar/ on then I stardet using Angular 2, but I cannot find the similiar addition. So I was wonder would be possible perfect scrollbar implement to Angular 2 project?

I followed this great example http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0 but I am kind a lost how to change in ngOnInit()


to this=>

$(function() {

Thank you for any advice.

Answer Source

You could initialize perfect scrollbar within a custom directive with vanilla js (since it supports it ;-)) like this:

import Ps from 'perfect-scrollable';

  selector: '[ps]'
export class PsDirective {
  constructor(private elementRef:ElementRef) {

  ngAfterViewInit() {

You can use / apply it like this:

  selector: 'app'
  template: `
    <div ps class="container">
      <div class="content"></div>
  styles: [`
    .content {
      background-image: url('https://noraesae.github.io/perfect-scrollbar/azusa.jpg');
      width: 1280px;
      height: 720px;

    .container {
      position: relative;
      margin: 0px auto;
      padding: 0px;
      width: 600px;
      height: 400px;
  directives: [ PsDirective ]
export class App {

The library must have been configured before this way (css and SystemJS):

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.11/css/perfect-scrollbar.min.css"/>

    transpiler: 'typescript', 
    typescriptOptions: { emitDecoratorMetadata: true }, 
    map: {
      'perfect-scrollable': 'https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.11/js/min/perfect-scrollbar.min.js'
    packages: {
      'app': {
        defaultExtension: 'ts'
        .then(null, console.error.bind(console));

See this plunkr: https://plnkr.co/edit/S8DJpHFVNFioklTl1xg6?p=preview.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download