Package Exports

ng2-ui

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng2-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular2 User Interface

Collection of Quality Angular 2 UIs

Demo

Modules Included

ng2-auto-complete
ng2-datetime-picker
ng2-map
ng2-overlay
ng2-scrollable
ng2-menu
ng2-popup
ng2-tooltip-overlay

Install

npm
```
$ npm install ng2-ui
```

update config.js map and packages

//map tells the System loader where to look for things
map: {
  app: "./src",
  '@angular': 'https://npmcdn.com/@angular',
  ...
  'ng2-ui': 'https://npmcdn.com/ng2-ui' // <----- this
},

packages: {
   app: {
     main: './main.ts',
     defaultExtension: 'ts'
   },
   ...
   'ng2-ui': {                              // <----- this
     main: 'dist/index.js',
     defaultExtension: 'js'
   }
}

Usage

Import and include directives for your application

app.ts

  //our root app component
  import {Component, enableProdMode} from '@angular/core'
  import { NG2_DIRECTIVES } from "ng2-ui";
  enableProdMode();

  @Component({
    selector: 'my-app',
    templateUrl: 'src/app.tpl.html',
    directives: [ NG2_DIRECTIVES ]
  })
  export class App {
    arrayOfValues: any[] = ['a', 'b', 'c'];
  }

src/app.tpl.html

  <input ng2-auto-complete [source]="arrayOfKeyValues" [(ngModel)]="myModel" />
  
  <input [(ngModel)]="date1" ng2-datetime-picker /> 
  
  <ng2-map center="Brampton, Canada"></ng2-map>

Directives

ng2-map Google Maps Api V3 Wrappe
ng2-auto-complete Typeahead for local and remote sources
ng2-datetime-picker Date picker, Time picker, or both
ng2-overlay Generic overlays
ng2-scrollable Scroll Enabler and Sccoll Detector
ng2-menu Menu(Drop-down, left-side, right-side, bottom)
ng2-popup Popup Modal
ng2-tooltop-overlay Tooltip

For Developer,

To publish a directive as a part of Ng2 UI, ng2-*

Update build.sh by adding additional line, so it will be added to distribution

 declare -a packages=(
     ng2-map
     ng2-auto-complete
     ng2-datetime-picker
     ng2-overlay
     ng2-scrollable
 )

Update src/ng2-directives.ts, so that it will included in NG2_DIRECTIVES

 import { NG2_MAP_DIRECTIVES } from './ng2-map';

 export const NG2_DIRECTIVES: any[] = [
   ..
   NG2_MAP_DIRECTIVES
 ];

Build again
```
 $ npm run build
```