'closeOnClickOutside' doesn't work on iPhone Chrome (56.0.2824.79) and Safari (iOS 10.2.1)

I have added mode properties which is not working at all am getting undefined error in my browser console any help

Greatings,

I have installed ng2-sibebar successfully

package.json:
"dependencies": {
"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",
"@angular/upgrade": "~2.1.0",
"angular-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"ng2-sidebar": "^1.6.1",

app.module:
import { SidebarModule } from 'ng2-sidebar';
@NgModule({
imports: [ SidebarModule],

Error Message:
"(SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng2-sidebar
Error: XHR error (404 Not Found) loading http://localhost:3000/ng2-sidebar
at wrapFn (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:17)
at ZoneDelegate.prototype.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:263:17)
at Zone.prototype.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:21)
at invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:21)
Error loading http://localhost:3000/ng2-sidebar as "ng2-sidebar" from http://localhost:3000/app/app.module.js"

Hi, because i use a sticky footer my body cannot be 100% height. The closeOnClickOutside wont work if i dont click the body.

https://github.com/arkon/ng-sidebar/blob/master/src/sidebar.component.ts#L369 document.addeventListener would fix it

I am using ng-sidebar in a project and need to be able to add/remove the backdrop while a sidebar is already open. Is this something you've ever considered implementing?

openedChange is not documented in the outputs
SidebarService is not documented

If you write a element with the closeSidebar directive directly on the lightdom of the ng2-sidebar all runs as expected.

@Component({
  selector: 'my-app',
  styles: [":host /deep/ ng2-sidebar aside { background-color: white }"],
  template: `
    <ng2-sidebar [(open)]="_open">
      <p>Sidebar contents</p>
      <a closeSidebar>Close</a>
    </ng2-sidebar>

    <button (click)="_toggleSidebar()">Toggle sidebar</button>
  `
})
export class App {
  private _open: boolean = false;

  private _toggleSidebar() {
    this._open = !this._open;
  }
}

@Component({
  selector: 'my-app',
  styles: [":host /deep/ ng2-sidebar aside { background-color: white }"],
  template: `
    <ng2-sidebar [(open)]="_open">
      <p>Sidebar contents</p>
      <close-sidebar></close-sidebar>
    </ng2-sidebar>

    <button (click)="_toggleSidebar()">Toggle sidebar</button>
  `
})
export class App {
  private _open: boolean = false;

  private _toggleSidebar() {
    this._open = !this._open;
  }
}

@Component({
  selector: 'close-sidebar',
  template: `
    <a closeSidebar>Close</a>
  `
})
export class CloseSidebar{}

I am able to install and start a local version of your repo but when i open a component in my editor, say the Sidebar class i get an error:

experimental support for decorators is a feature that is subject to change in a future release

Have you run into this before?

I am running tsc -v 1.8.10, if that helps?

Problems with AOT:
Error at /aot/node_modules/ng-sidebar/lib/sidebar-container.component.ngfactory.ts:93:44: Property '_sidebars' is private and only accessible within class 'SidebarContainer'.
Error at /aot/node_modules/ng-sidebar/lib/sidebar-container.component.ngfactory.ts:194:44: Property '_showBackdrop' is private and only accessible within class 'SidebarContainer'.
Error at /aot/node_modules/ng-sidebar/lib/sidebar-container.component.ngfactory.ts:197:44: Property '_getStyles' does not exist on type 'SidebarContainer'.
Error at /aot/node_modules/ng-sidebar/lib/sidebar.component.ngfactory.ts:282:18: Property '_elSidebar' is private and only accessible within class 'Sidebar'.
Error at /aot/node_modules/ng-sidebar/lib/sidebar.component.ngfactory.ts:304:44: Property '_getTransformStyle' does not exist on type 'Sidebar'.
Error at /aot/app/home/home.component.ngfactory.ts:188:44: Property '_sidebars' is private and only accessible within class 'SidebarContainer'.

Because private, protected accessors should be changed to public for any members accessed from template

Hi

I am getting below error after following the steps :

localhost/:52 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-sidebar.js
Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-sidebar.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js?1478617667938:647:29)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js?1478617667938:236:37)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js?1478617667938:136:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js?1478617667938:304:33)
Error loading http://localhost:3000/node_modules/ng2-sidebar.js as "ng2-sidebar" from http://localhost:3000/app/shared/shared.module.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js?1478617667938:647:29)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js?1478617667938:236:37)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js?1478617667938:136:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js?1478617667938:304:33)
Error loading http://localhost:3000/node_modules/ng2-sidebar.js as "ng2-sidebar" from http://localhost:3000/app/shared/shared.module.js "Error while loading app"

Could you please help me on this?
Am i missing anything?

Hello,

I have this error when I import SidebarModule in my @NgModule.

SyntaxError: export declarations may only appear at top level of a module (Browser's console Error)

I am using angular2 + meteor (latest version).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SidebarModule } from 'ng-sidebar';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AccountsModule } from 'angular2-meteor-accounts-ui';
import {Ng2PaginationModule} from 'ng2-pagination';
import { AgmCoreModule } from 'angular2-google-maps/core';
import { Select2Module } from 'ng2-select2';
import { AppComponent } from './app.component';
import { routes, ROUTES_PROVIDERS } from './app.routes';
import { DASHBOARD_DECLARATIONS } from './dashboard';
import { AUTH_DECLARATIONS } from "./authentication/index";
import { PARTIES_DECLARATIONS } from './parties';
import { CUSTOMERS_DECLARATIONS } from './customers';
import { SHARED_DECLARATIONS } from './shared';
import { ModalModule } from 'ng2-bootstrap/modal';
@NgModule({
  imports: [
    BrowserModule,
    SidebarModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(routes),
    AccountsModule,
    Ng2PaginationModule,
    AgmCoreModule.forRoot({
      apiKey: '*****'
    }),
    ModalModule.forRoot(),
    Select2Module
  ],
  declarations: [
    AppComponent,
    ...AUTH_DECLARATIONS,
    ...CUSTOMERS_DECLARATIONS,
    ...DASHBOARD_DECLARATIONS,
    ...PARTIES_DECLARATIONS,
    ...SHARED_DECLARATIONS
  ],
  providers: [
    ...ROUTES_PROVIDERS
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {}

I am newbie to Angular2. Could you help me with below issue.
Stylings marked via the class mentioned as sidebarClass isn't getting applied.

I need to update it so it uses angular-cli/AOT and whatnot instead of the custom-spun Webpack stuff that's going on right now.

Hi,

I tried to implement sidebar inside the child component (an div container) without success.
Is this possible? Do you have an example how to implement this?

Thanks

As requested in #14, it'd be nice to be able to specify the collapse amount so it's not always 110% (e.g. showing a thin portion when "collapsed").

It'd be nice to be able to throw a directive on contents in the sidebar indicating that clicking them would close the sidebar, like:

<ng2-sidebar>
  <button closeSidebar>Something</button>
</ng2-sidebar>

The module animate uses Web Animations API. This functionality is only for Firefox, Chrome, Opera and not completely. From the angular official docs recommends use web-animations.js

I think that is a good idea to add this advice to README.

Note: Thank you for the hard work.

It would be nice if users could somehow pass styles as an object or something, instead of explicitly overriding the defaults via CSS?

Howdy,

Is there a way to override thee default animation of the sidebar? (it pulls from left to right)

I only see the following on the documentation:
animate boolean true Animate the opening/closing of the sidebar.

I was wondering, since I'm doing some animations using angular2 api

Thanks,
e. Vazquez 😄

I noticed while testing my own app that the sidebar does not work correctly in the internet explorer. I retried it with your showcase sidebar and the bug does also occur.

When the mode is set to dock, the sidebar is shown correctly:

Then after you open and close it, the content of the main page is behind the sidebar, instead of being pushed.

The system I use is Windows 7 64 bit with the Internet Explorer 11 .
The push mode per se works correctly in the ie.

First of all, animations don't work well on older mobile devices, we can live with that (and that's not the real issue). But if we turn them off, sidebar does not get hidden on old iOS. It seems to be an issue with a non-prefixed transform (see http://stackoverflow.com/questions/30128587/ios-safari-transition-transform-not-working).

Contents are still keyboard-focusable when the sidebar is closed.

To better support different writing modes (e.g. RTL), the default position should simply be "start" instead of "left", adapting to the language as needed.

Setup -

• OS - macOS Sierra 10.12.2
• Node - v6.9.2
• NPM - v4.0.4
• IDE - IntelliJ Idea CE

I am able to clone, compile and run the demo directly but not able to integrate ng-sidebar with my new angular-cli created project.

I have followed the instructions given in the readme.md file here
If I add just <ng-sidebar </ng-sidebar> then it doesn't give any error. However if I add the content from the github readme file

    <!-- Container for sidebar(s) + page content -->
    <ng-sidebar-container>

      <!-- A sidebar -->
      <ng-sidebar [(opened)]="_opened">
        <p>Sidebar contents</p>
      </ng-sidebar>

      <!-- Page content -->
      <button (click)="_toggleSidebar()">Toggle sidebar</button>

    </ng-sidebar-container>

Unhandled Promise rejection: Template parse errors:
Can't bind to 'opened' since it isn't a known property of 'ng-sidebar'.
1. If 'ng-sidebar' is an Angular component and it has 'opened' input, then verify that it is part of this module.
2. If 'ng-sidebar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("

      <!-- A sidebar -->
      <ng-sidebar [ERROR ->][(opened)]="_opened">
        <p>Sidebar contents</p>
      </ng-sidebar>
"): AppComponent@4:18
'ng-sidebar-container' is not a known element:
1. If 'ng-sidebar-container' is an Angular component, then verify that it is part of this module.
2. If 'ng-sidebar-container' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<!-- Container for sidebar(s) + page content -->
    [ERROR ->]<ng-sidebar-container>

      <!-- A sidebar -->
"): AppComponent@1:4 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {_nativeError: Error: Template parse errors:
Can't bind to 'opened' since it isn't a known property of 'ng-sidebar'…} Error: Template parse errors:
Can't bind to 'opened' since it isn't a known property of 'ng-sidebar'.
1. If 'ng-sidebar' is an Angular component and it has 'opened' input, then verify that it is part of this module.
2. If 'ng-sidebar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("

      <!-- A sidebar -->
      <ng-sidebar [ERROR ->][(opened)]="_opened">
        <p>Sidebar contents</p>
      </ng-sidebar>
"): AppComponent@4:18
'ng-sidebar-container' is not a known element:
1. If 'ng-sidebar-container' is an Angular component, then verify that it is part of this module.
2. If 'ng-sidebar-container' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<!-- Container for sidebar(s) + page content -->
    [ERROR ->]<ng-sidebar-container>

For reference: https://github.com/GoogleChrome/ui-element-samples/tree/gh-pages/side-nav

Hi. It would be great if you can add option for automatic close sidebar when screen size is < 640px(for example) .

This might be my fault when adding sidebar. But the sidebar shows up ok when running the website so it seems to work. The problem is that when running the karma tests I get the error pasted bellow. The problem seems to be that the array _closeDirectives.forEach is undefined for some reason when the test run. I'm new to javavscript and it seems to me like it could be the combination of tools that I use which triggers this issue. But I was thinking that it could be something to look at for stability reasons. I can send you the project that I have to trigger the issue if you are interested.

  Chrome 53.0.2785 (Mac OS X 10.11.6)
Error: Error in /Users/perka124/Documents/dev/Java/StoryTeller/ui/dist/dev/app/app.component.html:0:0 caused by: Cannot read property 'forEach' of undefined
TypeError: Cannot read property 'forEach' of undefined
    at Sidebar.ngOnDestroy (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/ng2-sidebar/lib/sidebar.component.js:58:30)
    at DebugAppView._View_AppComponent0.destroyInternal (AppComponent.ngfactory.js:312:21)
    at DebugAppView.AppView.destroyLocal (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/@angular/core/bundles/core.umd.js:9402:18)
    at DebugAppView.destroyLocal (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/@angular/core/bundles/core.umd.js:9565:47)
    at DebugAppView.AppView._destroyRecurse (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/@angular/core/bundles/core.umd.js:9390:18)
    at DebugAppView.AppView._destroyRecurse (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/@angular/core/bundles/core.umd.js:9388:29)
    at DebugAppView.AppView._destroyRecurse (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/@angular/core/bundles/core.umd.js:9388:29)
    at DebugAppView.AppView.destroy (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/@angular/core/bundles/core.umd.js:9376:18)
    at ComponentRef_.destroy (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/@angular/core/bundles/core.umd.js:5911:86)
    at ComponentFixture.destroy (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/@angular/core/bundles/core-testing.umd.js:302:35)
    at eval (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/@angular/core/bundles/core-testing.umd.js:760:78)
    at Array.forEach (native)
    at TestBed.resetTestingModule (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/@angular/core/bundles/core-testing.umd.js:760:34)
    at Function.TestBed.resetTestingModule (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/@angular/core/bundles/core-testing.umd.js:668:26)
    at Object.eval (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/@angular/core/bundles/core-testing.umd.js:994:21)
    at ZoneDelegate.invoke (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/zone.js/dist/zone.js:203:28)
    at ProxyZoneSpec.onInvoke (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/zone.js/dist/proxy.js:72:39)
    at ZoneDelegate.invoke (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/zone.js/dist/zone.js:202:34)
    at Zone.run (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/zone.js/dist/zone.js:96:43)
    at Object.<anonymous> (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/zone.js/dist/jasmine-patch.js:91:50)
    at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/zone.js/dist/jasmine-patch.js:119:42)
    at ZoneDelegate.invokeTask (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/zone.js/dist/zone.js:236:37)
    at Zone.runTask (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/zone.js/dist/zone.js:136:47)
    at drainMicroTaskQueue (/Users/perka124/Documents/dev/Java/StoryTeller/ui/node_modules/zone.js/dist/zone.js:368:35)
    a

Hi @arkon.

I'm developing an Angular2 app using your sidebar component and it's really good. The problem is that I have an input tag into a sidebar and it's autofocused when the sidebar opens. In desktop browsers it's not a big deal, but in mobile browsers it causes the keyboard to raise up automatically and it disturbs the user experience a little bit on my opinion. So what do you think about adding a "focusFirstItem" input flag on the sidebar component (that could be true by default) to avoid this in case the developer wants to? I'm able to make a PR if you agree.

Regards and thanks again!

We're binding directly to document right now, which might not work with things like web workers.

Might want to use Document/BrowserDomAdapter.

im not able to focus elements in side nav, how can i do this?

Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

We are trying to use the module in a lazy loaded feature module. The error comes because you can not import Browser Module in a feature module. By using the CommonModule it will be more universally usable.

I have updated it locally by replacing the BrowserModule import with the CommonModule import and it is now working.

It would be helpful to add the ability to select whether the sidebar overlays content or pushes it right|down|left|up depending on location i.e. change the z-index and other styles.

Example: http://semantic-ui.com/modules/sidebar.html

Or: https://github.com/angular/material2/tree/master/src/lib/sidenav

I've installed ng-sidebar in a clean angular-cli project (beta 30) and it comes up unstyled, as per the picture below? Is this by design or have I missed something?

I followed the instructions in the readme.md.

I installed using npm install ng-sidebar --save

My app.component.html file looks like this:

       <!-- A sidebar -->
      <ng-sidebar [(opened)]="_opened">
        <p>Sidebar contents</p>
      </ng-sidebar>

     <!-- Page content -->
      <button (click)="_toggleSidebar()">Toggle sidebar</button>
   </ng-sidebar-container>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
  private _opened: boolean = false;

  private _toggleSidebar() {
    this._opened = !this._opened;
  }
}

import { SidebarModule } from 'ng-sidebar';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    SidebarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

It'd be nice if you could do something like:

import Sidebar from 'ng2-sidebar/sidebar';

Hi arkon,

I am not able to add this module to angular-seed. I have tried multiple ways like using the System Js configuraton, project.config.ts file but nothing works.

I am positioning the '.ng-sidebar' as absolute and setting its position as 'right'. On chrome the sidebar goes out more than it should and once i hover on it, it snaps back into its proper place. While on firefox/other the animation is jittery.

http://imgur.com/CE6tiLt

http://imgur.com/vffjbOH

This goes hand in hand with #3. (Holding off until RC5)

When using the showOverlay = true option, links and other DOM elements respond to my mouse cursor (hover styles and click events) when moving my mouse around the sidebar overlay.

This can cause an unexpected side effect of the user accidentally clicking a link when just trying to close the sidebar.

It would be much better to disable mouse events underneath the overlay, such as the behaviour of Bootstrap modals (http://getbootstrap.com/javascript/#modals).

I have had a quick look through the source code, and I can see 'pointer-events' is set to 'none', and I am not 100% sure how to approach fixing this.

Happy to attempt a fix and submit a PR if someone could point me in the right direction?

Thanks and good job on the package! 👍

Hi @arkon, i cant use this module in my shared module because of https://github.com/arkon/ng-sidebar/blob/master/src/sidebar.module.ts#L13

Use this instead:

static forRoot(): ModuleWithProviders {
    return {
      ngModule: SidebarModule,
      providers: [SidebarService]
    };
  }

Option to press ESC (or some other key) to close the sidebar.

We are using the ng-sidebar with the keyClose input set to false and keycode left as default however the sidebar is still closing when the escape key is pressed.

Thanks for the component. We are building a proto-type app, and it's finding its spot in a good place.

I was able to utilize the sidebar on the right side and it works fine.

However, when I tried to add "two" sidebars with different #, I get this odd issue.

Error: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
    at ExpressionChangedAfterItHasBeenCheckedError.ZoneAwareError (zone.js:992)
    at ExpressionChangedAfterItHasBeenCheckedError.BaseError [as constructor] (errors.js:22)
    at new ExpressionChangedAfterItHasBeenCheckedError (errors.js:59)
    at checkBinding (view_utils.js:167)
    at Wrapper_NgControlStatus.checkHost (/InternalFormsSharedModule/NgControlStatus/wrapper.ngfactory.js:33)
    at View_NgTableComponent10.detectChangesInternal (/AppModule/NgTableComponent/component.ngfactory.js:715)
    at View_NgTableComponent10.AppView.detectChanges (view.js:425)
    at View_NgTableComponent10.DebugAppView.detectChanges (view.js:620)
    at ViewContainer.detectChangesInNestedViews (view_container.js:67)
    at View_NgTableComponent9.detectChangesInternal (/AppModule/NgTableComponent/component.ngfactory.js:845)
    at View_NgTableComponent9.AppView.detectChanges (view.js:425)
    at View_NgTableComponent9.DebugAppView.detectChanges (view.js:620)
    at ViewContainer.detectChangesInNestedViews (view_container.js:67)
    at CompiledTemplate.proxyViewClass.View_NgTableComponent0.detectChangesInternal (/AppModule/NgTableComponent/component.ngfa

<ng-sidebar-container>
  <!-- A sidebar -->
  <ng-sidebar #bottombar
              [(opened)]="_displayed"
              [keyClose]="false"
              [position]="'bottom'"
              [mode]="'push'">
    Test

    <button>Test</button>
    <!--<button type="button" class="btn btn-secondary" (click)="bottombar.close()">Cancel</button>-->
    <!--&lt;!&ndash;<button type="button" class="btn btn-secondary btn-sm" (click)="submit()">Delete</button>&ndash;&gt;-->
    <!--<button type="button" class="btn btn-primary" (click)="submit()">Save</button>-->
  </ng-sidebar>
</ng-sidebar-container>

angular 2.1.1
angular router 3.1.1