Ng2-corp-ui NPM

Ng2CorpUi

This project was generated with angular-cli version 1.0.0-beta.17.

What is NG2 Corp UI Project ?

NG2 Corp UI is an angular 2 application which embed several UI components. These components are used in others ASG Angular applications (like 'Workspace' for exemple). NG2 Corp UI is like a 'demo' of all possibilities offer by this UI library.

Which components NG2 Corp UI Project contains ?

For now, 3 components are available :

Component tag	What it is ?
ng2-corp-desktop	It is the background of the workspace
ng2-corp-sidebar	It is the left vertical side bar which contains app icons
ng2-corp-topbar	It is the top horizontal bar which contains home icon and user menu

Installation

npm install ng2-corp-ui

Usage

Add Ng2CorpDesktop, Ng2CorpSidebar and/or Ng2CorpTopbar to your app module:

import { Ng2CorpDesktopModule } from 'ng2-corp-ui/src/app';
import { Ng2CorpSidebarModule } from 'ng2-corp-ui/src/app';
import { Ng2CorpTopbarModule } from 'ng2-corp-ui/src/app';


@NgModule({
  declarations: [Ng2CorpDesktopComponent, Ng2CorpSidebarComponent, Ng2CorpTopbarComponent],
  imports: [BrowserModule, Ng2CorpDesktopComponent, Ng2CorpSidebarComponent, Ng2CorpTopbarComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

Then you can add the tags in your component template (with correct files url):

<ng2-corp-desktop [backgroundImageUrl]="'http://localhost:4200/assets/images/background1.jpg'"></ng2-corp-desktop>
<ng2-corp-topbar [jsonFileUrl]="'http://localhost:4200/assets/data/topbar.json'"></ng2-corp-topbar>
<ng2-corp-sidebar [jsonFileUrl]="'http://localhost:4200/assets/data/sidebar.json'"></ng2-corp-sidebar>

json file format expected

[
  {
    "menuItems": [      
      {
        "title": "Dashboard",
        "externalLink": "#",
        "iconName": "dashboard",
        "children": [
          {
            "title": "Webtop n°1",
            "routerLink": ["/dashboard", "1"]            
          },
          {
            "title": "Webtop n°2",
            "routerLink": ["/dashboard", "2"]
          }
        ]
      },
      {
        "title": "Store",
        "externalLink": "#",
        "iconName": "store_mall_directory",
        "children": [
          {
            "title": "Administration",
            "externalLink": "/Store/Admin"
          }
        ]
      },      
      {
        "title": "Documentation",
        "externalLink": "/doc.html",
        "iconName": "import_contacts"
      }
    ]
  }
]

Also, you have to add some reference into the head tag of your global index.html file :

<!doctype html>
<html>
<head>
  ....
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
....