Angular 2 Material Flex-layout Split Panes

Question

I am stumbling through my first angular 2.4/Angular material application that is using flex-layout. It has one column with three rows that fill the screen. I would like to add a splitter between the bottom two rows and allow the height of each to be re-sizable by dragging the splitter on both desktop and touch screens. I have attempted to implement several of the available modules that advertise this functionality, but have had various issues with each. Angular-split was the most promising but seems to have compatibility issues with my existing code/webpack build config: https://bertrandg.github.io/angular-split/#/

Anyone have any working examples of this type of functionality that might help me get started.

Any input is appreciated.

<div class="flex-container content" fxLayout="column" fxLayoutAlign="top center">
    <div class="flex-item search-topbar" fxFlex="35%">
    </div>
    <div class="flex-item" fxFlex="40%">
        <!--Map-->  
    </div>
    <div class="flex-item result-bar" fxFlex="25%">
        <!--Search Results-->      
    </div>
</div>

Answer 1

You might need to have a look in to this one:

1. split pane demo https://plnkr.co/bxgcK29PNl9lexw6z6Ym
2. source https://github.com/wannabegeek/ng2-split-pane

And flex-layout docs and examples here:

1. demo: https://tburleson-layouts-demos.firebaseapp.com/#/docs
2. docs: https://github.com/angular/flex-layout/wiki
3. source git clone https://github.com/angular/flex-layout
4. npm run demo-app - running the demo as above locally