Is there a split pane library for angular that does not rely on other frameworks other than AngularJS?

Question

I'm looking for a split-pane library - something that will let me have 2 tables on a screen, and the user can drag the middle divider to show more of one table or the other.

I know there are libraries out there that do this, like the shagstrom one, but I was looking for something that didn't rely on jQuery. Does one exist, and if so, can you please point me to it?

https://github.com/angular-ui/ui-layout - this? – Ankh Feb 03 '16 at 12:45 — Ankh, Feb 03 '16 at 12:45

score 2 · Answer 1 · answered Mar 01 '16 at 20:48

2

You can use Split.js which have no dependencies and works very well.

Simple example:

Split(['#one', '#two'], {
    sizes: [25, 75],
    minSize: 200
});

This is not an angular librairy but but can easily integrate it inside a directive.

answered Mar 01 '16 at 20:48

bertrandg

3,147
2
27
35

Could you please take a look into you repository [angular-split](https://github.com/bertrandg/angular-split) and if it's possible to add some new contributors ? It seems that current contributors aren't not interested in developing this package but a lot of merge requests awaits to be reviewed and merged [example](https://github.com/bertrandg/angular-split/pull/204) – Tomorrow's Explorer Jul 22 '20 at 14:27
1

you're right > https://github.com/bertrandg/angular-split/issues/237 – bertrandg Jul 23 '20 at 11:56
Awesome! You are the best – Tomorrow's Explorer Jul 23 '20 at 13:29

score 2 · Answer 2 · answered Oct 12 '17 at 15:48

There is a split.js angular wrapper,angular-split that works just fine run , here is an example, after running npm install angular-split --save

Add AngularSplitModule to your app module:

import { AngularSplitModule } from 'angular-split';

@NgModule({
declarations: [
AppComponent,
...
],
imports: [
AngularSplitModule,
...
],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule {}

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { AngularSplitModule } from 'angular-split'

@Component({
selector: 'my-app',
styles: [`
:host {
  display: block;
  width: 500px;
  height: 400px;
  background: grey;
 }
 `],
  template: `
  <split direction="horizontal">
      <split-area [size]="30">
          <p>Lorem ipsum dolor sit amet...</p>
      </split-area>
      <split-area [size]="70">
          <p>Sed ut perspiciatis unde omnis iste natus erro...</p>
      </split-area>
  </split>`,
})
export class App {}


@NgModule({
imports: [ BrowserModule, AngularSplitModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}

plunker

Is there a split pane library for angular that does not rely on other frameworks other than AngularJS?

2 Answers2