feat(docs): update docs according to ng add feature (#4703)

README.md

@@ -41,7 +41,7 @@ Best way to quickly integrate <a href="https://getbootstrap.com/">Bootstrap 3</a
 ngx-bootstrap contains all core (and not only) Bootstrap components powered by Angular. So you don't need to include original JS components, but we are using markup and css provided by Bootstrap.
 
 ## Installation instructions
-
+##### Method 1
 Install `ngx-bootstrap` from `npm`:
 ```bash
 npm install ngx-bootstrap --save
@@ -78,6 +78,22 @@ You will need bootstrap styles:
 <!--- index.html -->
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
 ```
+##### Method 2
+Use the Angular CLI ng add command for updating your Angular project
+```bash
+ng add ngx-bootstrap
+```
+OR use `ng add` to add needed component (for example tooltip)
+```bash
+ng add ngx-bootstrap --component tooltip
+```
+Add component to your page:
+```
+<button type="button" class="btn btn-primary"
+        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+  Simple demo
+</button>
+```
 ### Setting up the bootstrap version manually
 Sometimes, your project might contain some library that could interfear with the bootstrap framework, or you might have a customized version of bootstrap. The consequence is that the process of determining bootstrap version might be failed, which can break the UI. In that case, we can still set the bootstrap version manually in the boostraping component (i.e. `AppComonent`):
 ```
@@ -118,13 +134,13 @@ Check demo page for API [reference](https://valor-software.com/ngx-bootstrap/)
 First time:
  - clone repository
  - `npm install`
- - `npm run test`
+ - `npm run build`
 
 To update your fork and prepare it for local usage:
  - `git pull upstream development`
  - `rm -rf node_modules`
  - `npm install`
- - `npm run test` _*// it will build the lib, create a link in node_modules and run package's "test" script*_
+ - `npm run build`
 
 To run the demo:
  - `npm run demo.serve` _*// to serve local demo. This is for testing only, without watchers.*_

demo/src/app/common/getting-started/getting-started.component.html

@@ -65,6 +65,7 @@ <h2 id="getting-started">Getting Started</h2>
       <p>ngx-bootstrap contains all core (and not only) Bootstrap components powered by Angular. So you don't need to include original JS components, but we are using markup and css provided by Bootstrap.</p>
 
       <h2 id="installation-instructions">Installation instructions</h2>
+      <h4>Method 1</h4>
 
       <p>Install <code>ngx-bootstrap</code> from <code>npm</code></p>
       <pre class="prettyprint lang-bash prettyprinted"><span class="pln">npm install ngx</span><span class="pun">-</span><span class="pln">bootstrap </span><span class="pun">--</span><span class="pln">save</span></pre>
@@ -80,7 +81,32 @@ <h2 id="installation-instructions">Installation instructions</h2>
       <p>To enable bootstrap 4 theme templates in ngx-bootstrap, please read <a href="https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/bootstrap.md">here</a></p>
       <pre class="prettyprint prettyprinted"><span class="com">&lt;!-- index.html --&gt;</span><span class="pln">
 </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">&gt;</span></pre>
-
+
+      <h4>Method 2</h4>
+      <p>Angular CLI <code>ng add</code> command will update your Angular project with the necessary ngx-bootstrap dependencies, make changes to package.json, angular.json and will execute initialization code.</p>
+      <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span></pre>
+      <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">componentName</span></pre>
+      <p>ng add will use your package manager to download dependencies for ngx-bootstrap and invoke an installation script (implemented as a schematic) which will update your project and add additional dependencies (e.g. styles)</p>
+      List of possible commands for adding appropriate component
+      <pre class="prettyprint lang-bash prettyprinted">
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">accordion</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">alerts</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">buttons</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">carousel</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">collapse</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">datepicker</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">dropdowns</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">modals</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">pagination</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">popover</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">progressbar</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">rating</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">sortable</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">tabs</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">timepicker</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">tooltip</span>
+        <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">typeahead</span></pre>
+
       <h3>Setting up the bootstrap version manually</h3>
 
       <p>Sometimes, your project might contain some library that could interfear with the bootstrap framework, or you might have a customized version of bootstrap. The consequence is that the process of determining bootstrap version might be failed, which can break the UI. In that case, we can still set the bootstrap version manually in the boostraping component (i.e. <code>AppComonent</code>):</p>

demo/src/app/components/+accordion/accordion-section.components.html

@@ -2,6 +2,7 @@
   <p>Displays collapsible content panels for presenting information in a limited amount of space</p>
   <p>The <strong>accordion component</strong> 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.</p>
-
+  <p>The easiest way to add an accordion component to your app (will be added to the root module)</p>
+  <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">accordion</span></pre>
   <docs-section [content]="componentContent"></docs-section>
 </demo-section>

demo/src/app/components/+accordion/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 // or
 import { AccordionModule } from 'ngx-bootstrap';

demo/src/app/components/+alerts/alerts-section.component.html

@@ -1,5 +1,6 @@
 <demo-section [name]="name" [src]="src" [componentContent]="componentContent">
   <p>Provides contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
-
+  <p>The easiest way to add an alerts component to your app (will be added to the root module)</p>
+  <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">alerts</span></pre>
   <docs-section [content]="componentContent"></docs-section>
 </demo-section>

demo/src/app/components/+alerts/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { AlertModule } from 'ngx-bootstrap/alert';
 // or
 import { AlertModule } from 'ngx-bootstrap';

demo/src/app/components/+buttons/buttons-section.component.html

@@ -1,6 +1,7 @@
 <demo-section [name]="name" [src]="src" [componentContent]="componentContent">
   <p>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.</p>
-
+  <p>The easiest way to add the buttons component to your app (will be added to the root module)</p>
+  <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">buttons</span></pre>
   <docs-section [content]="componentContent"></docs-section>
 </demo-section>

demo/src/app/components/+buttons/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { ButtonsModule } from 'ngx-bootstrap/buttons';
 // or
 import { ButtonsModule } from 'ngx-bootstrap';

demo/src/app/components/+carousel/carousel-section.component.html

@@ -1,6 +1,7 @@
 <demo-section [name]="name" [src]="src" [componentContent]="componentContent">
   <p>A slideshow component for cycling through elements—images or slides of text—like a carousel. <em>Nested
   carousels are not supported.</em></p>
-
+  <p>The easiest way to add the carousel component to your app (will be added to the root module)</p>
+  <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">carousel</span></pre>
   <docs-section [content]="componentContent"></docs-section>
 </demo-section>

demo/src/app/components/+carousel/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { CarouselModule } from 'ngx-bootstrap/carousel';
 // or
 import { CarouselModule } from 'ngx-bootstrap';

demo/src/app/components/+collapse/collapse-section.component.html

@@ -2,6 +2,7 @@
   <p>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 <strong>required transitions
   component</strong>(<em>not yet implemented</em>)) for easy toggle behavior.</p>
-
+  <p>The easiest way to add the collapse component to your app (will be added to the root module)</p>
+  <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">collapse</span></pre>
   <docs-section [content]="componentContent"></docs-section>
 </demo-section>

demo/src/app/components/+collapse/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 // or
 import { CollapseModule } from 'ngx-bootstrap';

demo/src/app/components/+datepicker/datepicker-section.component.html

@@ -4,7 +4,8 @@
       <br>
       <p>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.</p>
-
+      <p>The easiest way to add the datepicker component to your app (will be added to the root module)</p>
+      <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">datepicker</span></pre>
     </tab>
 
     <!-- Old datepicker part-->

demo/src/app/components/+datepicker/datepicker-section.list.ts

@@ -50,6 +50,7 @@ export const demoComponentContent: ContentSection[] = [
         component: require('!!raw-loader?lang=typescript!./demos/basic/basic.ts'),
         html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
         description: `
+          <p>Note: If you installed ngx-bootstrap not via ng add command, you will need to perform a several actions</p>
           <p>Notable change is additional css for it <code> "/datepicker/bs-datepicker.css"</code> <br></p>
           <p>There are two ways of adding css:</p>
           <ul>

demo/src/app/components/+datepicker/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 // or
 import { BsDatepickerModule } from 'ngx-bootstrap';

demo/src/app/components/+datepicker/docs/usageOld.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { DatepickerModule } from 'ngx-bootstrap/datepicker';
 // or
 import { DatepickerModule } from 'ngx-bootstrap';

demo/src/app/components/+dropdown/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 // or
 import { BsDropdownModule } from 'ngx-bootstrap';

demo/src/app/components/+dropdown/dropdown-section.component.html

@@ -1,6 +1,7 @@
 <demo-section [name]="name" [src]="src" [componentContent]="componentContent">
   <p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
   They’re made interactive with the included dropdown directives.</p>
-
+  <p>The easiest way to add the dropdown component to your app (will be added to the root module)</p>
+  <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">dropdowns</span></pre>
   <docs-section [content]="componentContent"></docs-section>
 </demo-section>

demo/src/app/components/+modal/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { ModalModule } from 'ngx-bootstrap/modal';
 // or
 import { ModalModule } from 'ngx-bootstrap';

demo/src/app/components/+modal/modal-section.component.html

@@ -1,6 +1,7 @@
 <demo-section [name]="name" [src]="src" [componentContent]="componentContent">
   <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality
   and smart defaults.</p>
-
+  <p>The easiest way to add the modals component to your app (will be added to the root module)</p>
+  <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">modals</span></pre>
   <docs-section [content]="componentContent"></docs-section>
-</demo-section>
+</demo-section>

demo/src/app/components/+pagination/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { PaginationModule } from 'ngx-bootstrap/pagination';
 // or
 import { PaginationModule } from 'ngx-bootstrap';

demo/src/app/components/+pagination/pagination-section.component.html

@@ -1,6 +1,7 @@
 <demo-section [name]="name" [src]="src" [componentContent]="componentContent">
   <p><strong>Pagination</strong> - provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.</p>
   <p><strong>Pager</strong> - quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
-
+  <p>The easiest way to add the pagination component to your app (will be added to the root module)</p>
+  <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">pagination</span></pre>
   <docs-section [content]="componentContent"></docs-section>
 </demo-section>

demo/src/app/components/+popover/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { PopoverModule } from 'ngx-bootstrap/popover';
 // or
 import { PopoverModule } from 'ngx-bootstrap';

demo/src/app/components/+popover/popover-section.component.html

@@ -1,5 +1,6 @@
 <demo-section [name]="name" [src]="src" [componentContent]="componentContent">
   <p>Add small overlay content, like those found in iOS, to any element for housing secondary information.</p>
-
+  <p>The easiest way to add the popover component to your app (will be added to the root module)</p>
+  <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">popover</span></pre>
   <docs-section [content]="componentContent"></docs-section>
 </demo-section>

demo/src/app/components/+progressbar/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 // or
 import { ProgressbarModule } from 'ngx-bootstrap';

demo/src/app/components/+progressbar/progressbar-section.component.html

@@ -1,5 +1,6 @@
 <demo-section [name]="name" [src]="src" [componentContent]="componentContent">
   <p>Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
-
+  <p>The easiest way to add the progressbar component to your app (will be added to the root module)</p>
+  <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">progressbar</span></pre>
   <docs-section [content]="componentContent"></docs-section>
 </demo-section>

demo/src/app/components/+rating/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { RatingModule } from 'ngx-bootstrap/rating';
 // or
 import { RatingModule } from 'ngx-bootstrap';

demo/src/app/components/+rating/rating-section.component.html

@@ -1,5 +1,6 @@
 <demo-section [name]="name" [src]="src" [componentContent]="componentContent">
   <p>Rating component that will take care of visualising a star rating bar</p>
-
+  <p>The easiest way to add the rating component to your app (will be added to the root module)</p>
+  <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">rating</span></pre>
   <docs-section [content]="componentContent"></docs-section>
 </demo-section>

demo/src/app/components/+sortable/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { SortableModule } from 'ngx-bootstrap/sortable';
 // or
 import { SortableModule } from 'ngx-bootstrap';

demo/src/app/components/+sortable/sortable-section.component.html

@@ -2,6 +2,8 @@
   <p>The <strong>sortable component</strong> represents a list of items, with ability to sort them or
   move to another container via drag&amp;drop. Input collection isn't mutated by the component,
   so events <code>ngModelChange</code>, <code>onChange</code> are using new collections.</p>
+  <p>The easiest way to add the sortable component to your app (will be added to the root module)</p>
+  <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">sortable</span></pre>
 
   <style>
     .sortable-item {

demo/src/app/components/+tabs/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { TabsModule } from 'ngx-bootstrap/tabs';
 // or
 import { TabsModule } from 'ngx-bootstrap';

demo/src/app/components/+tabs/tabs-section.component.html

@@ -1,5 +1,6 @@
 <demo-section [name]="name" [src]="src" [componentContent]="componentContent">
   <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. <strong>Nested tabs are not supported.</strong></p>
-
+  <p>The easiest way to add the tabs component to your app (will be added to the root module)</p>
+  <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">tabs</span></pre>
   <docs-section [content]="componentContent"></docs-section>
 </demo-section>

demo/src/app/components/+timepicker/docs/usage.md

@@ -1,4 +1,4 @@
-// RECOMMENDED (doesn't work with system.js)
+// RECOMMENDED
 import { TimepickerModule } from 'ngx-bootstrap/timepicker';
 // or
 import { TimepickerModule } from 'ngx-bootstrap';