feat(docs): modules imports usage updated

demo/src/app/components/accordion/docs/readme.md

@@ -1,10 +1,3 @@
-### Usage
-```typescript
-import { AccordionModule } from 'ng2-bootstrap/ng2-bootstrap';
-// or
-import { AccordionModule } from 'ng2-bootstrap/components/accordion';
-```
-
 ### Annotations
 ```typescript
 // component Accordion

demo/src/app/components/accordion/docs/title.md

@@ -1,3 +1,15 @@
 The **accordion component** builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.
 
-Base specifications: [bootstrap 3](http://getbootstrap.com/javascript/#collapse-example-accordion) or [bootstrap 4](http://v4-alpha.getbootstrap.com/components/collapse/#accordion-example)
+### Usage
+```typescript
+// RECOMMENDED
+import { AccordionModule } from 'ng2-bootstrap/accordion';
+// or
+import { AccordionModule } from 'ng2-bootstrap';
+
+@NgModule({
+  imports: [AccordionModule.forRoot(),...]
+})
+export class AppModule(){} 
+```
+

demo/src/app/components/alerts/docs/readme.md

@@ -1,10 +1,3 @@
-### Usage
-```typescript
-import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
-// or
-import { AlertModule } from 'ng2-bootstrap/components/alert';
-```
-
 ### Annotations
 ```typescript
 // class Alert

demo/src/app/components/alerts/docs/title.md

@@ -1,5 +1,16 @@
 Provides contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
 
-Base specifications: [bootstrap 3](http://getbootstrap.com/components/#alerts) or [bootstrap 4](http://v4-alpha.getbootstrap.com/components/alerts/)
-
 This directive can be used to generate alerts from the dynamic model data (using the `ng-for` directive).
+
+### Usage
+```typescript
+// RECOMMENDED
+import { AlertModule } from 'ng2-bootstrap/alert';
+// or
+import { AlertModule } from 'ng2-bootstrap';
+
+@NgModule({
+  imports: [AlertModule.forRoot(),...]
+})
+export class AppModule(){} 
+```

demo/src/app/components/buttons/docs/readme.md

@@ -1,13 +1,7 @@
-### Usage
-```typescript
-import { ButtonsModule } from 'ng2-bootstrap/ng2-bootstrap';
-// or
-import { ButtonsModule } from 'ng2-bootstrap/components/buttons';
-```
 ### Annotations
 ```typescript
 // directive ButtonRadio
-@Directive({ selector: '[btnRadio][ngModel]' })
+@Directive({ selector: '[btnRadio]' })
 export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
   @Input() public btnRadio:string;
   @Input() public uncheckable:boolean;
@@ -19,7 +13,7 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
   public onClick() {}
 }
 // directive ButtonCheckbox
-@Directive({ selector: '[btnCheckbox][ngModel]' })
+@Directive({ selector: '[btnCheckbox]' })
 export class ButtonCheckboxDirective implements ControlValueAccessor, OnInit {
   @Input() public btnCheckboxTrue:any;
   @Input() public btnCheckboxFalse:any;

demo/src/app/components/buttons/docs/title.md

@@ -1,3 +1,14 @@
 There are two directives that can make a group of buttons behave like a set of checkboxes, radio buttons, or a hybrid where radio buttons can be unchecked.
 
-Base specifications: [bootstrap 3](http://getbootstrap.com/javascript/#buttons) or [bootstrap 4](http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons)
+### Usage
+```typescript
+// RECOMMENDED
+import { ButtonsModule } from 'ng2-bootstrap/buttons';
+// or
+import { ButtonsModule } from 'ng2-bootstrap';
+
+@NgModule({
+  imports: [ButtonsModule.forRoot(),...]
+})
+export class AppModule(){} 
+```

demo/src/app/components/carousel/docs/readme.md

@@ -1,10 +1,3 @@
-### Usage
-```typescript
-import { CarouselModule } from 'ng2-bootstrap/ng2-bootstrap';
-// or
-import { CarouselModule } from 'ng2-bootstrap/components/carousel';
-```
-
 ### Annotations
 ```typescript
 // class Carousel implements OnDestroy

demo/src/app/components/carousel/docs/title.md

@@ -1,3 +1,14 @@
 A slideshow component for cycling through elements—images or slides of text—like a carousel. *Nested carousels are not supported.*
 
-Base specifications: [bootstrap 3](http://getbootstrap.com/javascript/#carousel) or [bootstrap 4](http://v4-alpha.getbootstrap.com/components/carousel/)
+### Usage
+```typescript
+// RECOMMENDED
+import { CarouselModule } from 'ng2-bootstrap/carousel';
+// or
+import { CarouselModule } from 'ng2-bootstrap';
+
+@NgModule({
+  imports: [CarouselModule.forRoot(),...]
+})
+export class AppModule(){} 
+```

demo/src/app/components/collapse/docs/readme.md

@@ -1,10 +1,3 @@
-### Usage
-```typescript
-import { CollapseModule } from 'ng2-bootstrap/ng2-bootstrap';
-// or
-import { CollapseModule } from 'ng2-bootstrap/components/collapse';
-```
-
 ### Annotations
 ```typescript
 // class Collapse

demo/src/app/components/collapse/docs/title.md

@@ -1,4 +1,14 @@
 Collapse component allows you to toggle content on your pages with a bit of JavaScript and some classes. Flexible component that utilizes a handful of classes (from the **required transitions component**(*not yet implemented*)) for easy toggle behavior.
 
-Base specifications: [bootstrap 3](http://getbootstrap.com/javascript/#collapse) or [bootstrap 4](http://v4-alpha.getbootstrap.com/components/collapse/)
+### Usage
+```typescript
+// RECOMMENDED
+import { CollapseModule } from 'ng2-bootstrap/collapse';
+// or
+import { CollapseModule } from 'ng2-bootstrap';
 
+@NgModule({
+  imports: [CollapseModule.forRoot(),...]
+})
+export class AppModule(){} 
+```

demo/src/app/components/datepicker/docs/readme.md

@@ -1,15 +1,8 @@
-### Usage
-```typescript
-import { DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
-// or
-import { DatepickerModule } from 'ng2-bootstrap/components/datepicker';
-```
-
 ### Annotations
 ```typescript
 // component DatePicker
 @Component({
-  selector: 'datepicker[ngModel], [datepicker][ngModel]'
+  selector: 'datepicker, [datepicker]'
 })
 ```
 

demo/src/app/components/datepicker/docs/title.md

@@ -1,4 +1,15 @@
 The Angular2 Datepicker is a highly configurable component that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges.
 
-Base specifications: [jquery-ui](https://api.jqueryui.com/datepicker/)
+<!-- Base specifications: [jquery-ui](https://api.jqueryui.com/datepicker/) -->
+### Usage
+```typescript
+// RECOMMENDED
+import { DatepickerModule } from 'ng2-bootstrap/datepicker';
+// or
+import { DatepickerModule } from 'ng2-bootstrap';
 
+@NgModule({
+  imports: [DatepickerModule.forRoot(),...]
+})
+export class AppModule(){} 
+```

demo/src/app/components/dropdown/docs/readme.md

@@ -1,22 +1,3 @@
-### Usage
-```typescript
-import { DropdownModule } from 'ng2-bootstrap/ng2-bootstrap';
-// or
-import { DropdownModule } from 'ng2-bootstrap/components/dropdown';
-```
-
-```html
-<!-- dropdown directive marks a dropdown root element -->
-<div dropdown>
-  <!-- click on dropdown-toggle toggles dropdown state, optional -->
-  <div dropdownToggle></div>
-  <!-- dropdown-menu holds content which will be shown -->
-  <div dropdownMenu>
-    <!-- this content will be shown if dropdown opened -->
-  </div>
-</div>
-```
-
 ### Annotations
 ```typescript
 // directive Dropdown

demo/src/app/components/dropdown/docs/title.md

@@ -1,4 +1,16 @@
 Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included dropdown directives.
 
-Base specifications: [bootstrap 3](http://getbootstrap.com/javascript/#dropdowns) or [bootstrap 4](http://v4-alpha.getbootstrap.com/components/dropdowns/)
+### Usage
+```typescript
+// RECOMMENDED
+import { DropdownModule } from 'ng2-bootstrap/dropdown';
+// or
+import { DropdownModule } from 'ng2-bootstrap';
+
+@NgModule({
+  imports: [DropdownModule.forRoot(),...]
+})
+export class AppModule(){} 
+```
+
 

demo/src/app/components/modal/docs/readme.md

@@ -1,12 +1,3 @@
-### Usage
-```typescript
-import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
-// or
-import { ModalModule } from 'ng2-bootstrap/components/modal';
-```
-
-Add the ModalModule import to the imports array of the child module that uses the modal, not the AppModule.
-
 ### Annotations
 ```typescript
 @Directive({

demo/src/app/components/modal/docs/title.md

@@ -1 +1,15 @@
 Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
+
+### Usage
+```typescript
+// RECOMMENDED
+import { ModalModule } from 'ng2-bootstrap/modal';
+// or
+import { ModalModule } from 'ng2-bootstrap';
+
+@NgModule({
+  imports: [ModalModule.forRoot(),...]
+})
+export class AppModule(){} 
+```
+

demo/src/app/components/pagination/docs/readme.md

@@ -1,10 +1,3 @@
-### Usage
-```typescript
-import { PaginationModule } from 'ng2-bootstrap/ng2-bootstrap';
-// or
-import { PaginationModule } from 'ng2-bootstrap/components/pagination';
-```
-
 ### Annotations
 ```typescript
 // component Pagination

demo/src/app/components/pagination/docs/title.md

@@ -2,5 +2,15 @@
 
 **Pager** - quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
 
-Base specifications: [bootstrap 3](http://getbootstrap.com/components/#pagination) or [bootstrap 4](http://v4-alpha.getbootstrap.com/components/pagination/)
+### Usage
+```typescript
+// RECOMMENDED
+import { PaginationModule } from 'ng2-bootstrap/pagination';
+// or
+import { PaginationModule } from 'ng2-bootstrap';
 
+@NgModule({
+  imports: [PaginationModule.forRoot(),...]
+})
+export class AppModule(){} 
+```

demo/src/app/components/progressbar/docs/readme.md

@@ -1,10 +1,3 @@
-### Usage
-```typescript
-import { ProgressbarModule } from 'ng2-bootstrap/ng2-bootstrap';
-// or
-import { ProgressbarModule } from 'ng2-bootstrap/components/progressbar';
-```
-
 ### Annotations
 ```typescript
 // class Progress implements OnInit

demo/src/app/components/progressbar/docs/title.md

@@ -1,3 +1,14 @@
 Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
 
-Base specifications: [bootstrap 3](http://getbootstrap.com/components/#progress) or [bootstrap 4](http://v4-alpha.getbootstrap.com/components/progress/)
+### Usage
+```typescript
+// RECOMMENDED
+import { ProgressbarModule } from 'ng2-bootstrap/progressbar';
+// or
+import { ProgressbarModule } from 'ng2-bootstrap';
+
+@NgModule({
+  imports: [ProgressbarModule.forRoot(),...]
+})
+export class AppModule(){} 
+```

demo/src/app/components/rating/docs/readme.md

@@ -1,15 +1,8 @@
-### Usage
-```typescript
-import { RatingModule } from 'ng2-bootstrap/ng2-bootstrap';
-// or
-import { RatingModule } from 'ng2-bootstrap/components/rating';
-```
-
 ### Annotations
 ```typescript
 // class Rating implements on Init
 @Component({
-  selector: 'rating[ngModel]'
+  selector: 'rating'
 })
 export class RatingComponent implements ControlValueAccessor, OnInit {
   @Input() public max:number;

demo/src/app/components/rating/docs/title.md

@@ -1,3 +1,16 @@
 Rating component that will take care of visualising a star rating bar
 
 *Note*: Bootstrap 4 do not include glyphicons anymore, so if you want to continue use this font, you will need to add a link to [`glyphicons.css`](https://github.com/valor-software/ng2-bootstrap/blob/master/demo/assets/css/glyphicons.css)
+
+### Usage
+```typescript
+// RECOMMENDED
+import { RatingModule } from 'ng2-bootstrap/rating';
+// or
+import { RatingModule } from 'ng2-bootstrap';
+
+@NgModule({
+  imports: [RatingModule.forRoot(),...]
+})
+export class AppModule(){} 
+```

demo/src/app/components/tabs/docs/readme.md

@@ -1,20 +1,3 @@
-### Usage
-```typescript
-import { TabsModule } from 'ng2-bootstrap/ng2-bootstrap';
-// or
-import { TabsModule } from 'ng2-bootstrap/components/tabs';
-```
-
-```html
-<tabset>
-  <tab heading='Tab 1'>Tab 1 content</tab>
-  <tab>
-    <template tabHeading>Tab 2</template>
-    Tab 2 content
-  </tab>
-</tabset>
-```
-
 ### Annotations
 ```typescript
 // component Tabset

demo/src/app/components/tabs/docs/title.md

@@ -1,3 +1,24 @@
 Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. **Nested tabs are not supported.**
 
-Base specifications: [bootstrap 3](http://getbootstrap.com/javascript/#tabs) or [bootstrap 4](http://v4-alpha.getbootstrap.com/components/navs/)
+### Usage
+```typescript
+// RECOMMENDED
+import { TabsModule } from 'ng2-bootstrap/tabs';
+// or
+import { TabsModule } from 'ng2-bootstrap';
+
+@NgModule({
+  imports: [TabsModule.forRoot(),...]
+})
+export class AppModule(){} 
+```
+
+```html
+<tabset>
+  <tab heading='Tab 1'>Tab 1 content</tab>
+  <tab>
+    <template tabHeading>Tab 2</template>
+    Tab 2 content
+  </tab>
+</tabset>
+```