ngx-moz-layouter - Angular 4 library. That create amazing and flexible layout for your application #alpha

Demo

View all the directives in action at https://digimuza.github.io/ngx-moz-layouter

Dependencies

• Angular (requires Angular 2 or higher, tested with 2.0.0)

Installation

Install above dependencies via npm.

Now install ngx-moz-layouter via:

npm install --save ngx-moz-layouter

---

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for ngx-moz-layouter:

map: {
  'ngx-moz-layouter': 'node_modules/ngx-moz-layouter/bundles/ngx-moz-layouter.umd.js',
}

---

Once installed you need to import the main module:

import { MozLayoutModule } from 'ngx-moz-layouter';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice MozLayoutModule.forRoot()):

import { MozLayoutModule } from 'ngx-moz-layouter';

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

Other modules in your application can simply import MozLayoutModule:

import { LibModule } from 'ngx-moz-layouter';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [MozLayoutModule, ...], 
})
export class OtherModule {
}

Usage

---

Component usage

Note: Define your layout components:

new DynamicComponent(ComponentClass,dataThatYouWantInject)

Note: Injected data will be accesible in data property:

---

<ngx-moz-layout [layoutComponents]="components"></ngx-moz-layout>

...
@Component({...})
export class SampleComponent implements OnInit {

  components:  MozLayoutComponentObjects = {
    TH:new DynamicComponent(YourTopHeaderComponent,[]),
    MH:new DynamicComponent(YourMiddleHeaderComponent,[]),
    BH:new DynamicComponent(YourBottomHeaderComponent,[]),
    LS:new DynamicComponent(YourLeftSideBarComponent,[]),
    LC:new DynamicComponent(YourLeftContentComponent,[]),
    MC:new DynamicComponent(YourMainContentComponent,[]),
    RC:new DynamicComponent(YourRightContentComponent,[]),
    RS:new DynamicComponent(YourRightSideBarComponent,[]),
    TF:new DynamicComponent(YourTopFooterComponent,[]),
    MF:new DynamicComponent(YourMiddleFooterComponent,[]),
    BF:new DynamicComponent(YourBottomFooterComponent,[]),
  };
  constructor() { }

}

---

Layout service usage

Note: Layout can be controled from any module component:

    //Set state of area
    // area parameter accepts TH,MH,BH,LS,LC,RC,RS,TF,MF,BF
    // states parrameter on,off and your defined layout states
    setAreaState(area: string, state: string): void;
    
    //toggle between two states
    toggleBetween(area: string, state1: string, state2: string): void;
    
    //Get specific area state - fires event when specific layout finishes animation
    getAreaState(area: string): BehaviorSubject<string>;
    
    //Set specific area size to specific size
    setLayoutAreaSize(area: string, value: number): void;

---

import {Component, OnInit} from '@angular/core';
import {  MozLayoutService  } from 'ngx-moz-layouter';

@Component({..})
export class MainContentComponentComponent implements OnInit {

    constructor(public layout: MozLayoutService) {
    }

    ngOnInit() {
    }

    toggle(area:string) {
        this.layout.toggleBetween(area,'on','off');
    }

}

License

Copyright (c) 2017 Andrius Mozūraitis (digimuza.com). Licensed under the MIT License (MIT)