Angular2 UI Kit


Keywords
Angular2, NG2, UI, Kit, CSS, SASS
License
MIT
Install
npm install ng2-ui-kit@0.0.4

Documentation

Angular UI Dev Kit

Demo

Quick Start

1. Install

ng2-ui-kit is available on npm package manager.

npm install ng2-ui-kit --save

2. Import

There's only one import that's need to be done since Angular NgModule pattern.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { UI_KIT } from 'ng2-ui-kit';

@NgModule({
  declarations: [
    AppComponent,
    UI_KIT
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule
  ],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

After that, you'll have ng2-ui-kit available app-wide.

Modules

Calendar (ui-kit-calendar)

Usage

<ui-kit-calendar [(ngModel)]="obj.date"></ui-kit-calendar>

Input Options

  • [opened] boolean If true, calendar will be init as opened. Default false
  • [format] moment.js format If specified, model value will be customly formatted. Default: 'YYYY-MM-DD'
  • [viewFormat] moment.js format Rendeder value format. Default 'D MMMM YYYY'
  • [firstWeekdaySunday] boolean If true, days will be rendered as first weekday Sunday. Default false

Example Form

screen shot 2016-09-07 at 17 17 08