chore(docs): readme update

README.md

@@ -1,196 +1,70 @@
 # ng2-bootstrap [![npm version](https://badge.fury.io/js/ng2-bootstrap.svg)](http://badge.fury.io/js/ng2-bootstrap) [![npm downloads](https://img.shields.io/npm/dm/ng2-bootstrap.svg)](https://npmjs.org/ng2-bootstrap)
 Native Angular2 directives for Bootstrap, works with Bootstrap 3 and 4-alfa
 
-Follow me [![twitter](https://img.shields.io/twitter/follow/valorkin.svg?style=social&label=%20valorkin)](https://twitter.com/valorkin) to be notified about new releases.
-
 [![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide)
 [![Build Status](https://travis-ci.org/valor-software/ng2-bootstrap.svg?branch=master)](https://travis-ci.org/valor-software/ng2-bootstrap)
 [![codecov](https://codecov.io/gh/valor-software/ng2-bootstrap/branch/development/graph/badge.svg)](https://codecov.io/gh/valor-software/ng2-bootstrap)
-[![slack](https://img.shields.io/badge/join-slack-brightgreen.svg)](https://www.hamsterpad.com/chat/ng2)
-[![Join the chat at https://gitter.im/valor-software/ng2-bootstrap](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/valor-software/ng2-bootstrap?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Dependency Status](https://david-dm.org/valor-software/ng2-bootstrap.svg)](https://david-dm.org/valor-software/ng2-bootstrap)
 [![NPM](https://nodei.co/npm/ng2-bootstrap.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/anymatch/)
 [![NPM](https://nodei.co/npm-dl/ng2-bootstrap.png?height=3&months=9)](https://nodei.co/npm-dl/anymatch/)
-[![Throughput Graph](https://graphs.waffle.io/valor-software/ng2-bootstrap/throughput.svg)](https://waffle.io/valor-software/ng2-bootstrap/metrics)
-
-
-<!---
-[![Test Coverage](https://codeclimate.com/github/valor-software/angular2-bootstrap/badges/coverage.svg)](https://codeclimate.com/github/valor-software/angular2-bootstrap/coverage)
--->
-
-# Usage & Demo
-
-[http://valor-software.github.io/ng2-bootstrap/](http://valor-software.github.io/ng2-bootstrap/)
-
-## If you need more modules check [here](https://github.com/valor-software/ng2-plans)
 
-# Starter packages
+## Table of contents 
+1. [Getting Started](#getting-started)
+2. [Installation instructions](#installation-instructions)
+3. [Usage & Demo](#usage--demo)
+4. [API](#api)
+5. [Troubleshooting](#troubleshooting)
+6. [Contributing](#contribution)
+7. [License](#license)
 
-*Hint*: simpliest way to add styles is a CDN:
-```html
-<!-- index.html -->
-<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
-```
-
-### With system.js: [angular2-quickstart](https://github.com/valor-software/angular2-quickstart)
-
-### With webpack: [AngularClass/angular2-webpack-starter](https://github.com/AngularClass/angular2-webpack-starter)
-- install `ng2-bootstrap` and typings for `moment.js`
-```bash
-  npm install ng2-bootstrap --save
-  # Install typings from NPM. Ambient typings will not help
-  typings install moment --save
-```
-- add some code
-```html
-  <!-- src/app/home/home.html -->
-  <alert type="info">Hello from ng2-bootstrap  {{ date.toDateString() }}</alert>
-  <div style="display:inline-block; min-height:290px;">
-    <datepicker [(ngModel)]="date" showWeeks="true"></datepicker>
-  </div>
-```
-```js
-  /* src/app/main.ts */
-  import { AlertModule, DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
-  ...
-  @NgModule({
-    imports: [
-      ...
-      AlertModule,
-      DatepickerModule
-    ]
-    ...
-  })
-  export class AppModule {
-  }
-
-  /* src/app/home/home.ts */
-  ...
-  @Component({
-    templateUrl: 'src/app/home/home.html'
-  })
-  export class Home {
-    date: Date = new Date();
-  }
-```
+# Getting Started
 
-### With gulp and system.js: [pkozlowski-opensource/ng2-play](https://github.com/pkozlowski-opensource/ng2-play) or [mgechev/angular2-seed](https://github.com/mgechev/angular2-seed)
-- *hint*: see `quickstart` section below for samples
-- just add link to `ng2-bootstrap` `system.js` bundle to `index.html` like in [angular2-quickstart](https://github.com/valor-software/angular2-quickstart)
-- and `moment.js` map in `system.js` configuration
+ng2-bootstrap contains all core (and not only) Bootstrap components powered by Angular 2. So you don't need to include original JS components, but we are using markup and css provided by Bootstrap.
+
+Additionally to allow reach experience while working with Dates we are using [moment.js](http://momentjs.com/), de facto base date manipulation library at the moment.
 
-## Install from npm
+# Installation instructions
 
+Install `ng2-bootstrap` from `npm`
 ```bash
-npm i ng2-bootstrap --save
+npm install ng2-bootstrap --save
 ```
 
-## Install from CDN
+You will need bootstrap styles
 
-Check [cdnjs](https://cdnjs.com/libraries/ng2-bootstrap) to include `ng2-bootstrap` as `system.js` bundle
-```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
-<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 ```
-
-## Quick start
-
-*Hint*: you can just clone [angular2-quickstart](https://github.com/valor-software/angular2-quickstart)
-
-If you are following [Angular2 5 min quickstart guide](https://angular.io/docs/ts/latest/quickstart.html), just add one line
-```html
 <!-- index.html -->
-<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 ```
 
-As for now `datepicker` is using `moment.js` to format date, so please update `system.js` config to contain mapping:
-```html
-<!-- index.html -->
-  System.config({
-    packages: {
-      app: {
-        format: 'register',
-        defaultExtension: 'js'
-      }
-    },
-    map: {
-      moment: 'node_modules/moment/moment.js'
-    }
-  });
-```
-
-Add Ng2BootstrapModule as imported module in your application module `app.module.ts`
-
-```ts
-import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+## How to use it with:
+ - `angular-cli` please refer to [getting-started-with-ng-cli](https://github.com/valor-software/ng2-bootstrap/tree/development/docs/ng-cli.md)
+ - `system.js` (and [angular2 quickstart](https://angular.io/docs/ts/latest/quickstart.html)) please checkout [sample repository](https://github.com/valor-software/angular2-quickstart) 
+ - `webpack` you can view our demo page [source code](https://github.com/valor-software/ng2-bootstrap/tree/development/demo)
+ - `plnkr` sample available [here](http://bit.ly/ng2-bootstrap-plnkr)
 
-import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
-import { AppComponent }  from './app.component';
-
-@NgModule({
-  imports:      [ BrowserModule, Ng2BootstrapModule ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
-})
-export class AppModule { }
-```
+# Usage & Demo
 
-And update your `app.component.ts` to have following content:
+Main source of API documentation and usage scenarious available here: 
+[http://valor-software.github.io/ng2-bootstrap/](http://valor-software.github.io/ng2-bootstrap/)
 
-```ts
-import { Component } from 'angular2/core';
+# API
+Check demo page for API [reference](http://valor-software.github.io/ng2-bootstrap/)
 
-@Component({
-  selector: 'my-app',
-  template: `<alert type="info">ng2-bootstrap hello world!</alert>`
-})
-export class AppComponent {
-}
-```
+# Troubleshooting
 
-If you are using Angular [compiler-cli](https://github.com/angular/angular/tree/master/modules/%40angular/compiler-cli) don't forget bootstrap ModuleNgFactory instead of your common app module.
+So your are in trouble, where to get help:
+- you can search and ask for help at [StackOverflow](https://stackoverflow.com/questions/tagged/ng2-bootstrap)
+- you can join [gitter](https://gitter.im/valor-software/ng2-bootstrap) or [slack](https://www.hamsterpad.com/chat/ng2) and ask a question ( response in slack will be faster )
+- if none of this helped please [search](https://github.com/valor-software/ng2-bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue) and only then open new issue
 
-```shell
-$ ./node_modules/.bin/ngc -p tsconfig.json
-```
+# Contribution
 
-```ts
-import { AppModuleNgFactory } from './app.module.ngfactory'
+Are very welcome! And remember, contribution is not only PRs and code, but any help with docs or helping other developers to solve issues are very appreciated! Thanks in advance! 
 
-platformBrowserDynamic().bootstrapModuleFactory(AppModuleNgFactory);
-```
+## If you need more modules check [here](https://github.com/valor-software/ng2-plans)
 
-And you are ready to go! :)
-
-<!--
-## Components
-
-- [x] Accordion
-- [x] Alert
-- [x] Buttons
-- [x] Carousel
-- [x] Collapse
-- [+-] Datepicker (Datepicker popup not implemented)
-- [x] Dropdown
-- [x] Modal
-- [x] Pagination
-- [ ] Popover
-- [x] Progressbar
-- [x] Rating
-- [x] Tabs
-- [x] Timepicker
-- [+-] Tooltip
-- [x] Typeahead
--->
-
-## API
-Check demo for API [documentation](http://valor-software.github.io/ng2-bootstrap/)
-
-## Contribution
-
-Please read central `ng2` modules [readme](https://github.com/valor-software/ng2-plans) for details, plans and approach and welcome :)
+Please read central `ng2` modules [readme](https://github.com/valor-software/ng2-plans) for details, plans and approach
 
 ## Credits
 Crossbrowser testing sponsored by [Browser Stack](https://www.browserstack.com)

demo/components/getting-started/installation.md

@@ -1,26 +1,19 @@
-### Installation
-
-**NOTE**: please use `npm 3.*` (`(sudo) npm i -g npm@3`)
+### Installation instructions
 
+Install `ng2-bootstrap` from `npm`
 ```bash
-npm install --save ng2-bootstrap
+npm install ng2-bootstrap --save
 ```
 
-Additionally you will need `moment.js` typings if you are planning to work with datepicker
+You will need Bootstrap styles
 
-```bash
-# install typings globally
-npm install -g typings
-# init typings if you don't have typings.json yet
-typings init
-# and install moment.js typings
-typings install moment --save
+```
+<!-- index.html -->
+<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 ```
 
-### How to use it with webpack?
-
-Please refer to [readme](https://github.com/valor-software/ng2-bootstrap#with-webpack-angularclassangular2-webpack-starter)
-
-### How to use it with system.js and angular2 quick start
-
-Please check this [instructions](https://github.com/valor-software/ng2-bootstrap#quick-start)
+## How to use it with:
+ - `angular-cli` please refer to [getting-started-with-ng-cli](https://github.com/valor-software/ng2-bootstrap/tree/development/docs/ng-cli.md)
+ - `system.js` (and [angular2 quickstart](https://angular.io/docs/ts/latest/quickstart.html)) please checkout [sample repository](https://github.com/valor-software/angular2-quickstart) 
+ - `webpack` you can view our demo page [source code](https://github.com/valor-software/ng2-bootstrap/tree/development/demo)
+ - `plnkr` sample available [here](http://bit.ly/ng2-bootstrap-plnkr)

demo/getting-started.md

@@ -1,26 +1,17 @@
 # Getting started
 
 ### Dependencies
-This module consists of native Angular2 components and directives, no jQuery or Bootstrap javascript is required.
 
-*datepicker*: requires moment for data parsing, until Intl polyfill will be implemented
-
-Always actual list of JS dependencies you can find [here](https://david-dm.org/valor-software/ng2-bootstrap)
-
-Plus this module plays nice with Bootstrap CSS [v3](http://getbootstrap.com/css/) and [v4](http://v4-alpha.getbootstrap.com)
-
-*Note* later on each component will be available independently via npm, jspm, etc.
+ng2-bootstrap contains all core (and not only) Bootstrap components powered by Angular 2. So you don't need to include original JS components, but we are using markup and css provided by Bootstrap.
+
+Additionally to allow reach experience while working with Dates we are using [moment.js](http://momentjs.com/), de facto base date manipulation library at the moment.
 
 ### Installation
 
 ```bash
 npm install --save ng2-bootstrap
 ```
 
-
-
-Have fun!
-
 ### Reading documentation
 
 Each `ng2-bootstrap` component has api and annotation docs, examples and working demo. Each `property` and `event` has type annotation and default value if any.

docs/get-started/ng-cli.md

@@ -0,0 +1,46 @@
+### Getting started with angular-cli
+
+#### Installing angular-cli
+
+*Important*: please check `angular-cli` version, it should be => "1.0.0-beta.16"
+
+*Note*: you can skip this part if you already have application generated by `ng-cli` and webpack
+
+```bash
+npm i -g angular-cli
+ng new my-app
+cd my-app
+ng serve
+```
+
+#### Adding ng2-bootstrap
+
+ - install `ng2-bootstrap`
+ ```bash
+   npm install ng2-bootstrap --save
+ ```
+
+- open `src/app/app.module.ts` and add
+```typescript
+import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
+...
+
+@NgModule({
+   ...
+   imports: [AlertModule, ... ],
+    ... 
+})
+```
+
+- open `src/app/app.component.html` and add
+```
+<alert type="success">hello</alert>
+```
+
+- and last thing you need is css, open `src/index.html` and add link to Bootstrap css
+```html
+<head>
+  ...
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+</head>
+```

package.json

@@ -52,10 +52,10 @@
     "moment": "2.15.1"
   },
   "peerDependencies": {
-    "@angular/common": "2.0.1",
-    "@angular/compiler": "2.0.1",
-    "@angular/core": "2.0.1",
-    "@angular/forms": "2.0.1"
+    "@angular/common": "~2.0.1",
+    "@angular/compiler": "~2.0.1",
+    "@angular/core": "~2.0.1",
+    "@angular/forms": "~2.0.1"
   },
   "devDependencies": {
     "@angular/common": "2.0.1",