Please copy over readme.md from previous project
Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/Angular-kitchen-sink
Regards,

Sean

Hi,

Im trying to format the splitgutter to own color and more, but with no success. :S
split-gutter {
background-image: none !important;
background-color: #123456 !important;
}

Any suggestions on how to make this possible?

BR

I want to use [hidden] property instead of *ngIf to hide/show a component.
[size]="0" is also not working, it is assigning 50% size by default.

Hello,

In our angular2 application we use webpack. I'm trying to install angular-split. In my app.module I imported AngularSplitModule and added it to imports in the same way as in your examples. I get the following error in the console:
"Unexpected value 'AngularSplitModule' imported by the module 'AppModule"

My package json dependencies looks like that:

"dependencies": {
"@angular/common": "2.4.4",
"@angular/compiler": "2.4.4",
"@angular/core": "2.4.4",
"@angular/forms": "2.4.4",
"@angular/http": "2.4.4",
"@angular/platform-browser": "2.4.4",
"@angular/platform-browser-dynamic": "2.4.4",
"@angular/router": "3.4.4",
"@google-cloud/speech": "0.6.0",
"angular-in-memory-web-api": "0.3.1",
"angular-modal-gallery": "^2.0.2",
"angular-split": "^0.2.0",
"angular2-modal": "^2.0.3",
"angular2-moment": "^1.3.3",
"animate.css": "3.5.1",
"app-module-path": "1.1.0",
"async": "2.1.4",
"awesome-typescript-loader": "3.0.0-beta.9",
"bcrypt-nodejs": "0.0.3",
"bluemix-objectstorage": "0.1.2",
"body-parser": "1.16.0",
"bootstrap": "4.0.0-alpha.4",
"bootstrap-loader": "2.0.0-beta.20",
"bpmn-js": "^0.19.0",
"browser-sync": "2.18.6",
"cfenv": "1.0.3",
"chalk": "1.1.3",
"collections": "5.0.6",
"compression": "1.6.2",
"config": "1.24.0",
"connect-multiparty": "2.0.0",
"cookie-session": "1.2.0",
"core-js": "2.4.1",
"csurf": "1.9.0",
"csvtojson": "1.1.2",
"curlrequest": "1.0.1",
"debug": "2.6.0",
"decompress": "4.0.0",
"dotenv": "2.0.0",
"ejs": "2.5.5",
"errorhandler": "1.5.0",
"express": "4.14.0",
"express-flash": "0.0.2",
"express-session": "1.15.0",
"express-status-monitor": "0.1.9",
"express-validator": "2.21.0",
"fluent-ffmpeg": "2.1.0",
"font-awesome": "4.7.0",
"font-awesome-sass-loader": "1.0.3",
"fs": "0.0.1-security",
"generate-function": "2.0.0",
"generate-object-property": "1.2.0",
"gspeech-api": "1.0.0",
"httpolyglot": "0.1.2",
"ionicons": "^2.0.1",
"jimp": "0.2.27",
"jquery": "2.2.4",
"jquery-slimscroll": "1.3.8",
"json-loader": "0.5.4",
"json-server": "^0.9.5",
"jsonpointer": "4.0.1",
"lodash": "4.15.0",
"lusca": "^1.4.1",
"method-override": "2.x",
"moment": "2.17.1",
"morgan": "1.7.0",
"multer": "1.2.0",
"natural": "0.4.0",
"ng2-bootstrap": "1.1.16",
"ng2-ckeditor": "1.0.7",
"ng2-dnd": "^2.2.2",
"ng2-smart-table": "0.5.0",
"ng2-tree": "0.0.2-7",
"ng2-uploader": "1.1.0",
"node-sass-middleware": "0.9.8",
"normalize.css": "5.0.0",
"npm": "4.1.2",
"passport": "0.3.2",
"passport-ibmid-oauth2": "0.0.8",
"passport-idaas-openidconnect": "2.0.1",
"passport-local": "^1.0.0",
"pg": "6.1.0",
"pg-connection-string": "0.1.3",
"pg-hstore": "2.3.2",
"postcss-load-config": "1.0.0",
"postcss-loader": "1.0.0",
"postcss-ordered-values": "2.2.3",
"pug": "2.0.0-beta8",
"randomstring": "1.1.5",
"reflect-metadata": "0.1.9",
"request": "2.79.0",
"resolve-url-loader": "1.6.1",
"rimraf": "2.6.1",
"rmdir": "1.2.0",
"rxjs": "5.0.1",
"search-index": "^0.9.15",
"sequelize": "3.30.0",
"sequelize-mock": "0.6.1",
"serve-static": "1.11.2",
"should": "10.0.0",
"socket.io": "1.7.2",
"socket.io-client": "1.7.2",
"unzip": "0.1.11",
"vaadin-split-layout": "^1.1.0",
"watson-developer-cloud": "2.15.2",
"webpack": "2.2.1",
"winston": "2.3.0",
"winston-daily-rotate-file": "1.4.3",
"xls-to-json": "0.4.0",
"xml-js": "0.9.7",
"xml2js": "0.4.17",
"xtend": "^4.0.1",
"zone.js": "0.7.7"
},
"devDependencies": {
"pre-push": "0.1.1",
"precommit-hook": "3.0.0",
"js-beautify": "1.6.8",
"@types/jasmine": "2.5.35",
"@types/jquery ": "2.0.33",
"@types/jquery.slimscroll": "1.3.30",
"@types/lodash": "0.0.28",
"@types/node": "6.0.46",
"@types/source-map": "0.1.27",
"@types/uglify-js": "2.0.27",
"@types/webpack": "2.0.0",
"angular2-router-loader": "0.3.4",
"angular2-template-loader": "0.6.0",
"awesome-typescript-loader": "3.0.0-beta.9",
"babel-core": "6.22.1",
"babel-loader": "6.2.10",
"canonical-path": "0.0.2",
"chai": "3.5.0",
"concurrently": "3.1.0",
"copy-webpack-plugin": "3.0.1",
"css-loader": "0.26.1",
"exports-loader": "0.6.3",
"extract-text-webpack-plugin": "2.0.0-rc.3",
"file-loader": "0.9.0",
"git-hooks-win": "1.1.11",
"hjson": "2.4.1",
"html-loader": "0.4.3",
"html-webpack-plugin": "2.15.0",
"html-webpack-pug-plugin": "0.0.3",
"http-server": "0.9.0",
"imports-loader": "0.6.5",
"istanbul": "0.4.2",
"jasmine-core": "2.4.1",
"jshint": "2.9.4",
"karma": "1.2.0",
"karma-jasmine": "1.0.2",
"karma-phantomjs-launcher": "1.0.2",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "1.8.0",
"lite-server": "2.2.2",
"mocha": "3.0.0",
"node-sass": "4.0.0",
"null-loader": "0.1.1",
"phantomjs-prebuilt": "2.1.7",
"pug-html-loader": "1.0.9",
"raw-loader": "0.5.1",
"resolve-url-loader": "1.6.1",
"sass-loader": "6.0.2",
"should": "10.0.0",
"style-loader": "0.13.1",
"supertest": "^2.0.0",
"tslint": "^3.15.1",
"typescript": "2.1.6",
"url-loader": "0.5.7",
"webdriver-manager": "10.2.5",
"webpack": "2.2.1",
"webpack-dev-server": "1.16.2",
"webpack-md5-hash": "0.0.5",
"webpack-merge": "0.14.0",
"webpack-node-externals": "1.5.4"
},

I would be very grateful if you could help.

I did as your mention at https://bertrandg.github.io/angular-split/#/ and also check at https://plnkr.co/edit/tEjcXo?p=preview but not successfuly.
Do you have an example with angular quickstart, which is non cli?
Thank for your support.

Hi, I'm trying to put the split component inside a div. this div is a flex-item with the following properties : 1 0 auto; the idea here is to have a vertical flexbox which contains a header , and the split component takes all the remaining available space in the flexbox under the header.
Here is the plunker : https://plnkr.co/edit/MbzZsXkPklp7tFc8foUF?p=preview

What I can do is include my header inside me split with a gutter size to 0 but i dont know in advance the height of my header to define the percentage of splitting

In my application I have a list of objects which is an @input(). Two components share this list. In one of them I'm modifying the list (adding / deleting elements) and in the second one I'm displaying the list in the following way:

<split-area *ngFor="let item of items">
    {{item.name}}
</split-area>

When I add a new element to this list by using splice method (for instance I add a new element on 2nd position) the new element is displayed at the end of the list (instead of 2nd position).
I've checked if it works when I use *ngFor on a

When I follow you instructions for webpack builds I get the following error. I'm at a loss for a solution and so have to ask for help. Any thoughts?

.//angular-split//@angular/core/@angular/core.es5.js
5870:15-36 Critical dependency: the request of a dependency is an expression
.//angular-split//@angular/core/@angular/core.es5.js
5886:15-102 Critical dependency: the request of a dependency is an expression

I am having the issue that traceur could not be loaded after importing the library (HTTP 404):

In mappings in system.config.js I have the following to define the angular-split as per manual:

'angular-split': 'node_modules/angular-split/dist/index.js

traceur is not even referenced as dependency anywhere in my project, not sure why I get this error

Hi, after changing the direction of the application from ltr to rtl your component isn't working as expected. Did you consider to support RTL-direction? Would be great. Thanks.

Hey,

Is this component is responsive because if I open page in iphone6 , Size (Height) of gutter line (line which splits 2 sections and able to drag) is too much.
It should be less for small devices.
Do we need to add any css for that or it is responsive by nature.

If I want hide panel - I must destroy all components of my panel

<split-area *ngIf="isVisible">
<my-module></my-module>
</split-area>

How I may just hide panel without destroying my components ?

css display: none and (size)=0 not working for me because module does not recalculating count of split-area's

Need like that
<split-area [hidden]="isHidden">

OS

windows 10

Versions

npm -v: 5.0.4

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.2.0
node: 6.11.0
os: win32 x64
@angular/animations: 4.2.5
@angular/cli: 1.2.0
@angular/common: 4.2.5
@angular/compiler: 4.2.5
@angular/compiler-cli: 4.2.5
@angular/core: 4.2.5
@angular/forms: 4.2.5
@angular/http: 4.2.5
@angular/language-service: 4.2.5
@angular/platform-browser: 4.2.5
@angular/platform-browser-dynamic: 4.2.5
@angular/router: 4.2.5
@angular/tsc-wrapped: 4.2.5

package.json file

{
  "name": "ngx-weui",
  "version": "1.0.6",
  "main": "bundles/ngx-weui.umd.js",
  "module": "index.js",
  "typings": "index.d.ts",
  "description": "weui for angular",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/cipchk/ngx-weui.git"
  },
  "keywords": [
    "ngx-weui",
    "ng2-weui",
    "angular weui",
    "angular2 weui",
    "weui"
  ],
  "author": "cipchk <cipchk>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/cipchk/ngx-weui/issues"
  },
  "homepage": "https://github.com/cipchk/ngx-weui#readme",
  "scripts": {
    "lite-server": "lite-server -c demo/bs-config.json",
    "demo.serve": "run-s build link demo.build lite-server",
    "demo.gh-pages": "run-s build docs demo.build demo.deploy",
    "demo.build": "ng build -prod",
    "demo.deploy": "gh-pages -d demo/dist",
    "link": "ngm link -p src --here",
    "lint": "exit 0",
    "disable-lint": "tslint \"**/*.ts\" -c tslint.json --fix --type-check -t prose -e \"node_modules/**\" -e \"dist/**\" -e \"temp/**\" -e \"scripts/docs/**\"",
    "flow.changelog": "conventional-changelog -i CHANGELOG.md -s -p angular",
    "flow.github-release": "conventional-github-releaser -p angular",
    "build": "run-s build.package copy.d.ts",
    "build.package": "ngm build -p src --clean",
    "build.watch": "ngm build -p src --watch --skip-bundles",
    "copy.d.ts": "copyfiles -f ./src/jweixin/wx.d.ts ./dist/jweixin",
    "start": "ng serve --aot --host 0.0.0.0",
    "pretest": "run-s lint build link",
    "test": "ng test -sr",
    "test-coverage": "ng test -sr -cc",
    "version": "npm run flow.changelog && git add -A",
    "e2e": "protractor",
    "docs": "gulp docs",
    "api": "gulp api-docs"
  },
  "dependencies": {},
  "peerDependencies": {
    "@angular/common": ">=4.0.0",
    "@angular/compiler": ">=4.0.0",
    "@angular/core": ">=4.0.0",
    "@angular/forms": ">=4.0.0"
  },
  "devDependencies": {
    "@angular/animations": "^4.2.2",
    "@angular/cli": "^1.1.1",
    "@angular/common": "^4.2.2",
    "@angular/compiler": "^4.2.2",
    "@angular/compiler-cli": "^4.2.2",
    "@angular/core": "^4.2.2",
    "@angular/forms": "^4.2.2",
    "@angular/http": "^4.2.2",
    "@angular/language-service": "^4.2.2",
    "@angular/platform-browser": "^4.2.2",
    "@angular/platform-browser-dynamic": "^4.2.2",
    "@angular/router": "^4.2.2",
    "@angular/tsc-wrapped": "^4.2.2",
    "@types/gulp": "^4.0.2",
    "@types/jasmine": "2.5.47",
    "@types/node": "~6.0.60",
    "@types/sinon": "^2.3.1",
    "angular-qq-maps": "^1.0.0",
    "angular-split": "^0.2.0",
    "chart.js": "^2.5.0",
    "classlist-polyfill": "^1.0.3",
    "codecov": "^2.2.0",
    "codelyzer": "~2.0.0",
    "copyfiles": "^1.2.0",
    "dgeni": "^0.4.7",
    "dgeni-packages": "^0.19.0",
    "g2-mobile": "^2.1.21",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^3.2.0",
    "gulp-cli": "^1.3.0",
    "gulp-connect": "^5.0.0",
    "gulp-dom": "^0.9.17",
    "gulp-flatten": "^0.3.1",
    "gulp-highlight-files": "0.0.4",
    "gulp-htmlmin": "^3.0.0",
    "gulp-if": "^2.0.2",
    "gulp-markdown": "^1.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-transform": "^1.1.0",
    "highlight.js": "^9.11.0",
    "http-rewrite-middleware": "^0.1.6",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-remap-istanbul": "^0.6.0",
    "karma-sauce-launcher": "^1.1.0",
    "lite-server": "^2.3.0",
    "lodash": "^4.17.4",
    "ng2-checklist": "^1.0.2",
    "ngm-cli": "0.5.2",
    "ngx-countdown": "^1.0.1",
    "ngx-gesture-password": "^1.0.0",
    "ngx-highlight-js": "^1.0.1",
    "ngx-notify": "^1.0.1",
    "npm-run-all": "4.0.2",
    "protractor": "~5.1.1",
    "rxjs": "^5.4.0",
    "sinon": "^2.3.5",
    "split.js": "^1.2.0",
    "swiper": "^3.4.2",
    "ts-helpers": "^1.1.2",
    "ts-node": "~3.0.2",
    "tslint": "^4.5.1",
    "typescript": "~2.3.4",
    "wallaby-webpack": "0.0.38",
    "webdriver-manager": "^12.0.6",
    "webpack-bundle-analyzer": "^2.8.1",
    "weui": "^1.1.2",
    "zone.js": "^0.8.5"
  }
}

The log given by the failure.

C:\Users\asdf\Desktop\work\ngx-weui>ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: 16aba8254ad2dc6bf92d
Time: 27037ms
chunk {0} main.bundle.js, main.bundle.js.map (main) 225 kB {3} [initial] [rendered]
chunk {1} scripts.bundle.js, scripts.bundle.js.map (scripts) 325 kB {4} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 20.1 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.85 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in C:/Users/asdf/Desktop/work/ngx-weui/node_modules/angular-split/node_modules/@angular/core/core.d.ts, resolving symbol AngularSplitModule in C:/Users/asdf/Desktop/work/ngx-weui/node_modules/angular-split/dist/angularSplit.module.d.ts, resolving symbol AngularSplitModule in C:/Users/asdf/Desktop/work/ngx-weui/node_modules/angular-split/dist/angularSplit.module.d.ts
webpack: Failed to compile.

If one split-area is not visible, the sum of the elements is not 100 after your resize one. Furthermore you can't really resize elements.

https://plnkr.co/edit/upigdyZdAJ7QzI784JE4?p=preview

If you try to drag the last gutter to the right, it's not possible and the size of the last element keeps "33.33" even if you drag it to the left.

I found this field, is it for the minimum size?

Hi,

Wondering whether there is a plan to support Angular 4.0?

I just to compile against Angular 4.0 with [email protected], got errors like:

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in ${MY_APP_PATH}/node_modules/angular-split/node_modules/@angular/core/src/metadata/ng_module.d.ts

Using the horizontal split I don't see the gutter. If I use the vertical split I see the gutter but can't move it.

The only way I can get it to show up and work is by changing the height in the generated element style for the split tag from 100% to 300px. (I found this using firebug.) I've tried adding height to the parent but it made no difference.

In the other split issue an you suggested:
Set it to specific height in pixels: height: 300px, what I did here: https://bertrandg.github.io/angular-split/#/examples . I couldn't find height this in the example.

I'm using angular-cli 1.0.0-beta.25.5.

I want to resize an split area dynamically from typescript is there any way??

https://bertrandg.github.io/angular-split/#/examples

The doc says:

Simple horizontal split

but in the example it is:

    <split direction="vertical">

in the actual code it is:

 direction="horizontal"

Same Problem for the second example.

Hi,

Would be awesome with an click event on the gutter.
e.g clicking on the gutter toggles from 50% to 20%.
So instead of dragging one can toggle its pct.

Hey,
I'm trying to delete the background image from split-gutter tag and style it my own way. I'm trying to do that this way, but it's not working:
split-gutter {
background-image: none !important;
}
Could you please help me?

On Safari, if we have a div inside split-area and set its height to 100%, its height be will the same as the height of split instead of split-area. Therefore the div could just overflow the split-area. This does not happen on Chrome.

To demonstrate the problem, I have forked the site examples and here is the code snippet:

https://github.com/xwb1989/angular-split/blob/website-src/src/app/examples/examples.route.component.html#L11

Build the site and open it in Safari and Chrome, you will see the difference.

Is Horizontal scroll support for this control?

I have two split-areas, one of them containing a iframe. If I try to make the first split-area bigger, by dragging the gutter over the iframe, the gutter stucks until I leave the iframe-area again.

https://plnkr.co/edit/XQMNILs3NfLKXnh3TMCy?p=preview

Hi,
I am referring to link https://bertrandg.github.io/angular-split/#/

1. I have installed angular-split using command
   npm install angular-split --save
2. configured app.module.ts
   i) imported using satement import { AngularSplitModule } from 'angular-split';
   ii)imports statement like imports: [ // import Angular's modules
   BrowserModule,
   FormsModule,
   HttpModule,
   RouterModule.forRoot(ROUTES, { useHash: true }),
   ChartModule,
   TranslateModule.forRoot(),
   AngularSplitModule
   ],
   iii)Added html in home.component.html

<split direction="vertical">
   <split-area [size]="25">
        <p>Lorem ipsum dolor sit amet...</p>
    </split-area>
    <split-area [size]="75">
        <p>Sed ut perspiciatis unde omnis iste natus erro...</p>
    </split-area>
</split>

But still it doesn't work. It shows splitter component but it does not move when I try to slide
Kindly help.
My pacakge.json file package dependancies are as follows :

{
   "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/platform-server": "2.4.1",
    "@angular/router": "3.4.1",
    "@angularclass/conventions-loader": "1.0.2",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "angular-split": "^0.1.15",
    "angular2-highcharts": "^0.4.0",
    "assets-webpack-plugin": "^3.4.0",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "ng2-translate": "^5.0.0",
    "protractor": "^4.0.14",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.0.2",
    "zone.js": "~0.7.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.1",
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.34",
    "@types/node": "^6.0.38",
    "@types/selenium-webdriver": "2.53.38",
    "@types/source-map": "^0.5.0",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^1.12.34",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "~3.0.0-beta.17",
    "codelyzer": "~2.0.0-beta.4",
    "copy-webpack-plugin": "^4.0.0",
    "css-loader": "^0.26.0",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.9.0",
    "gh-pages": "^0.12.0",
    "html-webpack-plugin": "^2.21.0",
    "imports-loader": "^0.7.0",
    "istanbul-instrumenter-loader": "1.2.0",
    "json-loader": "^0.5.4",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.0",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.8.0",
    "node-sass": "^4.1.1",
    "parse5": "^2.2.1",
    "raw-loader": "0.5.1",
    "rimraf": "~2.5.4",
    "sass-loader": "^4.1.1",
    "script-ext-html-webpack-plugin": "1.3.2",
    "source-map-loader": "^0.1.5",
    "string-replace-loader": "1.0.5",
    "style-loader": "^0.13.1",
    "to-string-loader": "^1.1.4",
    "ts-helpers": "1.1.2",
    "ts-node": "^2.0.0",
    "tslint": "^4.0.0-dev.0",
    "tslint-loader": "^3.3.0",
    "typedoc": "^0.5.3",
    "typescript": "2.0.10",
    "url-loader": "^0.5.7",
    "webpack": "2.1.0-beta.25",
    "webpack-dev-middleware": "1.6.1",
    "webpack-dev-server": "2.1.0-beta.9",
    "webpack-md5-hash": "0.0.5",
    "webpack-merge": "0.15.0"
  },
    "engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
  }
}

Hello!

I have two horizontal split areas. When i reduce the screen size to mobile, I want to remove the splitter and have these areas one below the other.

Any hint?

Great component! A view lines of code to install and then it works out of the box.

Here a very minor, minor, minor issue.
In horizontal mode (vertical gutter) my eyes noted a small discrepancy in the shown dots caused by the default gutterSize of 10: 3 + [2] + 1 +[2] + 2. Setting it to 9 or 11 solved it.
Would it be an idea to default it to 9 or 11?

I've got a page with a split separating it into two columns. The split-area for each column has a class "splitLeft" or "splitRight". These classes specify minimum and maximum width values for each split-area which will allow the split to only travel within an acceptable range. This is needed in my case in order to prevent sub columns in the right column from squashing together and becoming unusable. When the split reaches one of the assigned maximums or minimums it will stop visually moving in the direction you are dragging; however, it appears that the width value continues to be increased as long as you continue dragging your mouse. This means when you go to drag the split back the other direction you have to drag back the full amount you over-dragged previously plus what is visible on the screen.

If you have the maximum width set to 30px but don't release your mouse click until you've dragged to the 70px mark then the split will stop at 30px visually but the position of the split will be set at the 70px mark. If you then try to drag from the 30px mark to the 20px mark you will actually have to drag 50px to the left before the split visually is at the 20px point. Until you have dragged the 40px to make up the over-drag from 30px-70px earlier there will be no visual change to the split.

I have attempted to create a plunker to demonstrate the issue, but as this is the first time I've ever used plunker I'm not entirely sure this will work: https://plnkr.co/edit/2HllZ6zjhDKeC6EdrA96?p=preview

Hello
Thank you for component.
Could you change != 100 behavior like

for example:
Component width = 600
Left panel width = 100
Right panel width = "AUTO" or "*" (real size of right panel will be 500)

Thank you again

The Visibility feature uses 'display: block' to show content at the moment.
Is it possible to use 'flex' instead?
I think, a choosable option would be the most gentle way...

• Feature request

Is there any way to create an header/title feature with those behavior:

1. split-header (header/title): stay fixed;
2. split-area: scollable

I am trying to build angular-split as npm package and local deploy to test it. I tried both aot and jit build, both generate es6. Do you have a custom build step to build es5? Also, is the NPM package aot build or jit build?

Please take a look at this Plunkr: https://plnkr.co/edit/jLMmkWGnH1etFLkBCi8b?p=preview.

I am trying to have a persistent unsplit content (25% on left side) and trying to vertically split the remaining 75% on the right. I do not want to split the left and right side.

Any help is appreciated.

Just installed npm install angular-split --save

Is there any way to disable split-gutter and than enable it again? I mean the same behavior as for example button has.

This error is caused because of version mismatch of packages.

So, can you please add angular/common, angular/compiler, angular/core, angular/platform-browser, core-js, rimraf, rxjs, reflect-metadata, typescript and zone.js as peerDependencies

Hello,

Seem like this lib is not compatible with [email protected]. With [email protected], everything works for me.

I've got the same error than #41 when I start the server.

Could you please check on your side ?

Thanks you,

I use systemjs for load node module, can't have angulars-split working.

Got following runtime error:

zone.js:232 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost/cmstrunk/angular-split
	Error: XHR error (404 Not Found) loading http://localhost/cmstrunk/angular-split
	    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:698:29)
	    at ZoneDelegate.invokeTask (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:265:35)
	    at Zone.runTask (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:154:47)
	    at XMLHttpRequest.ZoneTask.invoke (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:335:33)
	Error loading http://localhost/cmstrunk/angular-split as "angular-split" from http://localhost/cmstrunk/js/ngWidgets/igxroot.module.js
	    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:698:29)
	    at ZoneDelegate.invokeTask (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:265:35)
	    at Zone.runTask (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:154:47)
	    at XMLHttpRequest.ZoneTask.invoke (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:335:33)
	Error loading http://localhost/cmstrunk/angular-split as "angular-split" from 

localhost/cmstrunk is the app url.

AOT compile run into following error:

[08:49:15] Error: Command failed: "node_modules\.bin\ngc" -p tsconfig.json
can't resolve module D:/ProductDev_TF/CMS_Trunk/CMS_Site/node_modules/angular-split/node_modules/@angular/core/src/di/reflective_key.d.ts from D:/Prod
uctDev_TF/CMS_Trunk/CMS_Site/node_modules/angular-split/node_modules/@angular/core/src/di/reflective_key.d.ts
Error: can't find symbol KeyRegistry exported from module D:/ProductDev_TF/CMS_Trunk/CMS_Site/node_modules/angular-split/node_modules/@angular/core/sr
c/di/reflective_key.d.ts
    at ReflectorHost.findDeclaration (D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\compiler-cli\src\reflector_host.js:173:23)
    at D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\compiler-cli\src\codegen.js:137:46
    at Array.forEach (native)
    at extractProgramSymbols (D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\compiler-cli\src\codegen.js:120:10)
    at CodeGenerator.codegen (D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\compiler-cli\src\codegen.js:57:29)
    at codegen (D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\compiler-cli\src\main.js:7:81)
    at Object.main (D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\tsc-wrapped\src\main.js:30:16)
    at Object.<anonymous> (D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\compiler-cli\src\main.js:16:9)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
Compilation failed

    at ChildProcess.exithandler (child_process.js:207:12)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:852:16)
    at Socket.<anonymous> (internal/child_process.js:323:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:492:12)

I am using version 0.1.15

Any help is appreciated.

Arnold

Hi!

I guess this would be a feature request, but would it be possible to get touch support for dragging the resize bar? Currently if used on a mobile browser with only touch as input I don't see a way to resize the areas.

Thanks!

Just installed npm install angular-split --save.
added the following lines
'angular-split': 'node_module/angular-split/dist/index.js'
, 'angular-split': {
main: './index.js',
defaultExtension: 'js'
}

in my app.module.ts,
I added
import { AngularSplitModule } from 'angular-split';

@NgModule({
imports: [
BrowserModule
, HttpModule
, FormsModule
, SelectModule
, ReactiveFormsModule
, AngularSplitModule
// , SplitPaneModule
, DropdownTreeviewModule.forRoot()
, AgGridModule.withComponents([])
],

I get the runtime error :

http://localhost:3000/node_module/angular-split/dist/index.js 404 (Not Found)

Error loading http://localhost:3000/node_module/angular-split/dist/index.js as "angular-split" from http://localhost:3000/app/app.module.js

Even though, I have the file:
$ls node_modules/angular-split/dist/index.js
node_modules/angular-split/dist/index.js

less node_modules/angular-split/dist/index.js
export { AngularSplitModule } from './angularSplit.module';
export { SplitComponent } from './split.component';
export { SplitAreaDirective } from './splitArea.directive';
export { SplitGutterDirective } from './splitGutter.directive';
//# sourceMappingURL=index.js.map

Am I doing anything wrong?

One feature always useful is to set minimum size for an area. Ideally in pixels.

Would you like me to work on this feature for you?

I need to be able to drag the gutter so that one pane is completely hidden and the other pane takes up the whole space except for the gutter on the side where the other pane was. There seems to be some minimum size set for the panes, though I can't figure out where that is.

Any ideas?

Thx.

My package.json file:

{
"name": "SampleApp",
"version": "0.0.0",
"description": "Description for SampleApp",
"private": true,
"license": "UNLICENSED",
"cacheDirectories": [
"node_modules"
],
"dependencies": {
"@angular/animations": "4.2.6",
"@angular/cdk": "^2.0.0-beta.8",
"@angular/common": "4.2.6",
"@angular/compiler": "4.2.6",
"@angular/core": "4.2.6",
"@angular/forms": "4.2.6",
"@angular/http": "4.2.6",
"@angular/material": "^2.0.0-beta.8",
"@angular/platform-browser": "4.2.6",
"@angular/platform-browser-dynamic": "4.2.6",
"@angular/router": "4.2.6",
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.28",
"angular-split": "^0.2.2",
"angular2-perfect-scrollbar": "^2.0.6",
"bootstrap": "4.0.0-alpha.6",
"chart.js": "^2.6.0",
"core-js": "2.4.1",
"css-ripple-effect": "^1.0.5",
"font-awesome": "4.7.0",
"hammerjs": "^2.0.8",
"jquery": "3.2.1",
"jquery-ui-bundle": "^1.12.1",
"moment": "^2.18.1",
"ng-jhipster": "0.2.7",
"ng2-webstorage": "1.8.0",
"ngx-cookie": "1.0.0",
"ngx-infinite-scroll": "0.5.1",
"primeng": "^4.1.2",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"swagger-ui": "2.2.10",
"tether": "1.4.0",
"uglify-js": "^3.0.28",
"zone.js": "0.8.13"
},
"devDependencies": {
"@angular/cli": "1.2.0",
"@angular/compiler-cli": "4.2.6",
"@types/jasmine": "2.5.53",
"@types/node": "8.0.13",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "3.2.1",
"browser-sync": "2.18.12",
"browser-sync-webpack-plugin": "1.2.0",
"codelyzer": "3.1.2",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.28.4",
"exports-loader": "0.6.4",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"generator-jhipster": "4.6.2",
"html-loader": "0.4.5",
"html-webpack-plugin": "2.29.0",
"jasmine-core": "2.6.4",
"karma": "1.7.0",
"karma-chrome-launcher": "2.2.0",
"karma-coverage": "1.1.1",
"karma-intl-shim": "1.0.3",
"karma-jasmine": "1.1.0",
"karma-junit-reporter": "1.2.0",
"karma-notify-reporter": "1.0.1",
"karma-phantomjs-launcher": "1.0.4",
"karma-remap-istanbul": "0.6.0",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "2.0.4",
"merge-jsons-webpack-plugin": "1.0.8",
"ngc-webpack": "3.0.0",
"phantomjs-prebuilt": "2.1.14",
"proxy-middleware": "0.15.0",
"rimraf": "2.6.1",
"sourcemap-istanbul-instrumenter-loader": "0.2.0",
"string-replace-webpack-plugin": "0.1.3",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"tslint": "5.5.0",
"tslint-loader": "3.5.3",
"typescript": "2.4.1",
"sass-loader": "6.0.6",
"node-sass": "4.5.3",
"postcss-loader": "2.0.6",
"xml2js": "0.4.17",
"webpack": "3.3.0",
"webpack-dev-server": "2.5.1",
"webpack-merge": "4.1.0",
"webpack-notifier": "1.5.0",
"webpack-visualizer-plugin": "0.1.11",
"web-app-manifest-loader": "0.1.1",
"write-file-webpack-plugin": "4.1.0"
},
"engines": {
"node": ">=6.9.0"
},
"scripts": {
"lint": "tslint --type-check --project './tsconfig.json' -e 'node_modules/**'",
"lint:fix": "yarn run lint -- --fix",
"ngc": "ngc -p tsconfig-aot.json",
"cleanup": "rimraf target/{aot,www}",
"clean-www": "rimraf target//www/app/{src,target/}",
"start": "yarn run webpack:dev",
"webpack:dev": "yarn run webpack-dev-server -- --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060",
"webpack:build:main": "yarn run webpack -- --config webpack/webpack.dev.js --progress --profile",
"webpack:build": "yarn run cleanup && yarn run webpack:build:main",
"webpack:prod:main": "yarn run webpack -- --config webpack/webpack.prod.js --progress --profile",
"webpack:prod": "yarn run cleanup && yarn run webpack:prod:main && yarn run clean-www",
"webpack:test": "yarn run test",
"webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js",
"test": "karma start src/test/javascript/karma.conf.js",
"test:watch": "yarn test -- --watch",
"postinstall": "node node_modules/phantomjs-prebuilt/install.js"
}
}

Note: After implementation of angular-split I am unable to run package in prod. I am getting the below error.

[ERROR] Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in /home/SampleApp/node_modules/angular-split/node_modules/@angular/core/core.d.ts, resolving symbol AngularSplitModule in /home/SampleApp/node_modules/angular-split/dist/angularSplit.module.d.ts, resolving symbol AngularSplitModule in /home/SampleApp/node_modules/angular-split/dist/angularSplit.module.d.ts

Please help me out.

Made an angular-cli project implementing a basic split. The gutter is displayed but it cannot be dragged. Is there something I'm missing?

Switching areas order then dragging gutter leads to weird behavior.

To reproduce, go on website:

• Goto 'examples' section
• Click on 'Dynamically controlled split'
• Click on 'Switch'
• Then dragging behaves wrongly: onDragEnd handler
• Click on 'Switch' again
• Then dragging behaves normally

The latest version of angular-split is not compatible with Angular 5, which was released today. When starting the application, the following error can be seen:

Uncaught Error: Unexpected value 'AngularSplitModule' imported by the module 'QuestionnaireModule'. Please add a @NgModule annotation.

Hi,
Do you know how include import in systemjs config ?

thx

Is not working when opened from a modal

When including angular-split in a local package.json, this module no longer compiles successfully against the latest typescript. Typescript 2.4.1 now enforces stricter checking and the following error is presented against he rxjs hard inclusion that is part of angular-split:

ERROR in C:\git\std_default_project\node_modules\angular-split\node_modules\rxjs\Subject.d.ts
(16,22): error TS2415: Class 'Subject<T>' incorrectly extends base class 'Observable<T>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.
      Type 'Observable<T>' is not assignable to type 'Observable<R>'.
        Type 'T' is not assignable to type 'R'.

rxjs (5.4.2) has already released a fix for this (ReactiveX/rxjs#2722). However, since angular-split brings along its own version of rxjs (5.0.2) (which includes the issue), building a project with this angular-split module now fails when run against TS 2.4.1

Hi,

I installed the angular-split via npm, and in my app.module.ts, I added the following... It worked at first, by simply adding <split-area [size]="30">...my code here ... <split-area [size]="70">...my code here ... . The screen separator works like a charm. But since I am using the sidebar component of Semantics UI which is my front-end framework, the split panel stopped working. My suspicion is that the sidebar automatically adds class="pusher" to the body tag after the sidebar is clicked on, and that conflicts with the angular-split.

Do you have any ideas on how to go about resolving this issue?

import { AngularSplitModule } from 'angular-split';
@NgModule({
imports: [
...
AngularSplitModule
...
],