feat(docs): add installation guides (#740)

package.json

@@ -109,10 +109,10 @@
     "@angular-devkit/build-angular": "~0.6.0",
     "@angular-devkit/core": "^0.6.5",
     "@angular-devkit/schematics": "^0.6.5",
+    "@angular/cdk": "6.0.0",
     "@angular/cli": "^6.0.0",
     "@angular/compiler-cli": "6.0.0",
     "@angular/language-service": "6.0.0",
-    "@angular/cdk": "6.0.0",
     "@types/gulp": "3.8.36",
     "@types/highlight.js": "9.12.2",
     "@types/jasmine": "2.8.3",
@@ -124,7 +124,7 @@
     "codelyzer": "4.0.2",
     "conventional-changelog-cli": "1.3.4",
     "del": "3.0.0",
-    "doc-prsr": "^2.1.0",
+    "doc-prsr": "2.1.1",
     "firebase-tools": "^3.18.6",
     "gulp": "3.9.1",
     "gulp-autoprefixer": "3.1.1",
@@ -158,7 +158,7 @@
     "ts-node": "3.2.2",
     "tslint": "5.7.0",
     "tslint-language-service": "0.9.6",
-    "typedoc": "0.7.1",
+    "typedoc": "^0.12.0",
     "typescript": "2.7.2",
     "uglify-es": "3.2.2",
     "uglifyjs-webpack-plugin": "1.1.5"

src/framework/theme/components/accordion/accordion.component.ts

@@ -24,6 +24,20 @@ import { convertToBoolProperty } from '../helpers';
  *  </nb-accordion-item>
  * </nb-accordion>
  * ```
+ * ### Installation
+ *
+ * Import `NbAccordionModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbAccordionModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ * ### Usage
+ *
  * With `multi` mode acordion can have multiple items expanded:
  * @stacked-example(Showcase, accordion/accordion-multi.component)
  *

src/framework/theme/components/actions/actions.component.ts

@@ -84,6 +84,19 @@ export class NbActionComponent {
  *   <nb-action icon="nb-person"></nb-action>
  * </nb-actions>
  * ```
+ * ### Installation
+ *
+ * Import `NbActionsModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbActionsModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ * ### Usage
  *
  * Multiple sizes example:
  * @stacked-example(Multiple Sizes, action/action-sizes.component)

src/framework/theme/components/alert/alert.component.ts

@@ -21,6 +21,19 @@ import { convertToBoolProperty } from '../helpers';
  *   You have been successfully authenticated!
  * </nb-alert>
  * ```
+ * ### Installation
+ *
+ * Import `NbButtonModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbAlertModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ * ### Usage
  *
  * Alert could additionally have a `close` button when `closable` property is set:
  * ```html

src/framework/theme/components/badge/badge.component.ts

@@ -16,6 +16,19 @@ import { NbLayoutDirectionService } from '../../services/direction.service';
  * It means parent `position` should be set to anything except `static`, e.g. `relative`,
  * `absolute`, `fixed`, or `sticky`.
  *
+ * ### Installation
+ *
+ * Import `NbBadgeModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbBadgeModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ * ### Usage
  *
  * Badge with default position and status(color):
  *

src/framework/theme/components/button/button.component.ts

@@ -16,6 +16,19 @@ import { convertToBoolProperty } from '../helpers';
  * ```html
  * <button nbButton></button>
  * ```
+ * ### Installation
+ *
+ * Import `NbButtonModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbButtonModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ * ### Usage
  *
  * Buttons are available in multiple colors using `status` property:
  * @stacked-example(Button Colors, button/button-colors.component.html)

src/framework/theme/components/calendar/calendar-range.component.ts

@@ -22,6 +22,18 @@ export interface NbCalendarRange<D> {
  * ```html
  * <nb-calendar-range [(range)]="range"></nb-calendar-range>
  * ```
+ * ### Installation
+ *
+ * Import `NbCalendarRangeModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbCalendarRangeModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
  */
 @Component({
   selector: 'nb-calendar-range',

src/framework/theme/components/calendar/calendar.component.ts

@@ -20,6 +20,20 @@ import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode } from '../calendar-
  * Basic usage example
  * @stacked-example(Showcase, calendar/calendar-showcase.component)
  *
+ * ### Installation
+ *
+ * Import `NbCalendarModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbCalendarModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ * ### Usage
+ *
  * If you want to select ranges you can use `NbCalendarRangeComponent`.
  *
  * ```html

src/framework/theme/components/card/card.component.ts

@@ -70,6 +70,21 @@ export class NbCardFooterComponent {
  *   </nb-card-body>
  * </nb-card>
  * ```
+ *
+ * ### Installation
+ *
+ * Import `NbCardModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbCardModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ * ### Usage
+ *
  * Card with header and footer:
  * @stacked-example(With Header & Footer, card/card-full.component)
  *

src/framework/theme/components/card/flip-card/flip-card.component.ts

@@ -28,6 +28,20 @@ import { Component, Input, HostBinding } from '@angular/core';
  * </nb-flip-card>
  * ```
  *
+ * ### Installation
+ *
+ * Import `NbCardModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbCardModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ * ### Usage
+ *
  * Flip Card with header and footer:
  * @stacked-example(With Header & Footer, flip-card/flip-card-full.component.ts)
  *

src/framework/theme/components/card/reveal-card/reveal-card.component.ts

@@ -28,6 +28,20 @@ import { Component, Input, HostBinding } from '@angular/core';
  * </nb-reveal-card>
  * ```
  *
+ * ### Installation
+ *
+ * Import `NbCardModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbCardModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ * ### Usage
+ *
  * Reveal Card with header and footer:
  * @stacked-example(With Header & Footer, reveal-card/reveal-card-full.component)
  *

src/framework/theme/components/chat/chat.component.ts

@@ -49,6 +49,33 @@ import { NbChatMessageComponent } from './chat-message.component';
  *   </nb-chat-form>
  * </nb-chat>
  * ```
+ * ### Installation
+ *
+ * Import `NbChatModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbChatModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ *
+ * If you need to provide an API key for a `map` message type (which is required by Google Maps)
+ * you may use `NbChatModule.forRoot({ ... })` call if this is a global app configuration
+ * or `NbChatModule.forChild({ ... })` for a feature module configuration:
+ *
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbChatModule.forRoot({ messageGoogleMapKey: 'MAP_KEY' }),
+ *   ],
+ * })
+ * export class AppModule { }
+ *
+ * ### Usage
  *
  * There are three main components:
  * ```ts

src/framework/theme/components/checkbox/checkbox.component.ts

@@ -13,6 +13,20 @@ import { convertToBoolProperty } from '../helpers';
  *
  * @stacked-example(Showcase, checkbox/checkbox-showcase.component)
  *
+ * ### Installation
+ *
+ * Import `NbCheckboxComponent` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbCheckboxComponent,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ * ### Usage
+ *
  * Can have one of the following statuses: danger, success or warning
  *
  * @stacked-example(Colored Checkboxes, checkbox/checkbox-status.component)

src/framework/theme/components/context-menu/context-menu.directive.ts

@@ -36,6 +36,19 @@ import { NB_DOCUMENT } from '../../theme.options';
  * ...
  * items = [{ title: 'Profile' }, { title: 'Log out' }];
  * ```
+ * ### Installation
+ *
+ * Import `NbContextMenuModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbContextMenuModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ * ### Usage
  *
  * If you want to handle context menu clicks you have to pass `nbContextMenuTag`
  * param and register to events using NbMenuService.

src/framework/theme/components/datepicker/datepicker.directive.ts

@@ -115,6 +115,20 @@ export const NB_DATE_ADAPTER = new InjectionToken<NbDatepickerAdapter<any>>('Dat
  *
  * @stacked-example(Showcase, datepicker/datepicker-showcase.component)
  *
+ * ### Installation
+ *
+ * Import `NbDatepickerModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbDatepickerModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ * ### Usage
+ *
  * If you want to use range selection, you have to use `NbRangepickerComponent` instead:
  *
  * ```html

src/framework/theme/components/dialog/dialog.service.ts

@@ -32,6 +32,20 @@ import { NbDialogContainerComponent } from './dialog-container';
  * A new dialog is opened by calling the `open` method with a component to be loaded and an optional configuration.
  * `open` method will return `NbDialogRef` that can be used for the further manipulations.
  *
+ * ### Installation
+ *
+ * Import `NbDialogModule` to your app module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbDialogModule.forRoot(config),
+ *   ],
+ * })
+ * export class AppModule { }
+ * ```
+ * ### Usage
+ *
  * ```ts
  * const dialogRef = this.dialogService.open(MyDialogComponent, { ... });
  * ```

src/framework/theme/components/input/input.directive.ts

@@ -14,6 +14,20 @@ import { convertToBoolProperty } from '../helpers';
  * <input nbInput></input>
  * ```
  *
+ * ### Installation
+ *
+ * Import `NbInputModule` to your feature module.
+ * ```ts
+ * @NgModule({
+ *   imports: [
+ *   	// ...
+ *     NbInputModule,
+ *   ],
+ * })
+ * export class PageModule { }
+ * ```
+ * ### Usage
+ *
  * Default input size is `medium`:
  * @stacked-example(Showcase, input/input-showcase.component)
  *