Angular 2 and Slideout

Hi,

I have tried to use slideout with angular2 and I have some difficulties and errors.

I have install slideout by npm install. Add slideout in typings (typings install…). Then, in my page.component.ts, import slideout

import 'slideout';

then in the ngOnInit() :

this.slideout = new Slideout( { 'panel': this.element.nativeElement.querySelector('main'), 'menu': this.element.nativeElement.querySelector('nav'), 'padding': 256, 'tolerance': 70 });

Next, in the page.component.scss, add class in the css :

`.slideout-menu { position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 0; width: 256px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: none; }

  .slideout-panel {
    position:relative;
    z-index: 1;
    will-change: transform;
}

  .slideout-open,
  .slideout-open body,
  .slideout-open .slideout-panel {
    overflow: hidden;
}

  .slideout-open .slideout-menu {
    display: block;
}`

I save all, compile, and access the page in my browser chrome. I have the following error :

EXCEPTION: Slideout is not defined

Do I miss something here ? Is slideout compatible with angular2 ?

Thanks for any help.

[pazguille]

Hi @gillouneos, Could you try to import the module like this?

import Slideout from 'slideout';

[mhmodsn]

Hello, I am using Webpack Module Bundler and I have added this plugin to the plugins, and Now it is working with me 😃

 new webpack.ProvidePlugin({
   Slideout: "slideout"
 })

As well as in the component.ts

import 'slideout';
declare var Slideout:any;

I think there is maybe something in SystemJS to make like what I made in Webpack