Install ng-ui-application

NG UI Application is an Angular 2 library of UI components to easily set up custom templates with toolbars and resizable sections, panels etc… like in a desktop software.

Download

NG UI Application is an opensource module at npm. Please run the following command in your application to download it to your project.

npm install ng-ui-application --save

To avoid to import manually several stylesheets or js scripts, NG UI Application will do everything for you and will generate a « __hive-4-apps » directory.

During the installation, you need just answer at the following question :

Please what is the root path where index.html is located (ex: "/src/public/" or "/") ?

Just check where is located the index.html file in your application and set the path.

Examples

Project structure Answer
Project

| – app/

| – node_modules/

| – index.html

/
Project
| - node_modules/
| - src/
| - app/
| - public/
| - index.html
/src/public/

 

Compatibilities

NG UI Application is available for SystemJS and Webpack project.

Browser compatibilities

Firefox Chrome Edge
layout implementation
Automatic loading of dimensions for slices and sections
resizable slices and sections √ after collapse them ×

 

 

Import

The NG UI Application core is a unique module named « HiveModule ». You can import it like this :

app.module.ts

 

import { NgModule }      from '@angular/core';
import { AppComponent }   from './app.component';
...
import { HiveModule } from 'ng-ui-application';
@NgModule({
imports: [ 
...,
 HiveModule
],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }

 

 

Configuration

SystemJS

As every npm package, you need to call it in systemjs.config.js file.

systemjs.config.js

(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'ng-ui-application': 'npm:ng-ui-application'
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
     'ng-ui-application': {
      main: './index.js',
        defaultExtension: 'js'
      }
}
});
})(this);

Webpack

Nothing more  😀

Usage

app.component.ts

import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<ui-application title="My App"></ui-application>
`,
})
export class AppComponent {}

To know more : see Demo