Giter Club home page Giter Club logo

Angular2 User Interface

Collection of Quality Angular 2 UIs

IMPORTANT: NOT-MAINTAINED

Accepting volunteers and ready to transfer ownership.

Example

Modules Included

module version most-recent version
@ngui/auto-complete 0.13.0
@ngui/collapsable 0.5.0
@ngui/datetime-picker 0.16.0
@ngui/infinite-list 0.6.0
@ngui/map 0.17.0
@ngui/menu 0.6.0
@ngui/overlay 0.8.0
@ngui/parallax-scroll 0.5.0
@ngui/popup 0.5.0
@ngui/scrollable 0.9.0
@ngui/sticky 0.6.0
@ngui/tab 0.5.0
@ngui/tooltip 0.5.0
@ngui/sortable 0.4.0
@ngui/react 0.3.0

Install

  • npm

    $ npm install @ngui/ngui @types/googlemaps @types/hammerjs --save-dev
  • update systemjs.config.js map and packages

    map['@ngui/ngui'] =  'node_modules/@ngui/ngui/dist/ngui.umd.js';

Usage

  • import NguiModule into your app.module.ts

    import { NgModule }       from '@angular/core';
    import { BrowserModule }  from '@angular/platform-browser';
    import { FormsModule }    from "@angular/forms";
    import { HttpModule } from '@angular/http';
    
    import { AppComponent }   from './app.component';
    import { NguiModule, NguiMapModule }  from '@ngui/ngui';              // <---- this
    
    @NgModule({
      imports: [
        BrowserModule, 
        FormsModule, 
        HttpModule, 
        NguiModule,  // <--- this
        NguiMapModule['forRoot']({ apiUrl: 'YOUR GOOGLE MAP URL WITH KEY'}) // <---- this
      ],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
  • It's ready. Now use it in your template

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

ng2-ui welcomes new members and contributors

This module is only improved and maintained by contributors like you;

As a contributor, it's NOT required to be skilled in Javascript nor Angular2. It’s required to be open-minded and interested in helping others. You can contribute to the following;

  • Updating README.md
  • Making more and clearer comments
  • Answering issues and building FAQ
  • Documentation
  • Translation

In result of your active contribution, you will be listed as a core contributor on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui, please send me email to allenhwkim AT gmail.com with your github id.

For Developers

To start

$ git clone https://github.com/ng2-ui/ngui.git
$ cd ngui
$ npm install
$ npm run build
$ npm start

To update dependencies

$ npm run upgrade

ng2-ui's Projects

map icon map

Angular Google Maps Directives

menu icon menu

Angular2 Menu Directive

ngui icon ngui

Collection of Quality Angular2 Directives

overlay icon overlay

General Solution For Angular2 Overlay Elements

react icon react

Directive Utilizes React Components

scrollable icon scrollable

Angular2 Automatic Scroll Detection With Animation

sortable icon sortable

An example of how to pakcage a Angular2 project into a bundle

sticky icon sticky

Angular2 "position: sticky" implementation as a directive

tab icon tab

Angular 2 Tab Component

utils icon utils

Utility functions used in ng2-ui directives

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.