diff --git a/README.md b/README.md index b643da4d60..e6c5fdf07e 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ Best way to quickly integrate Bootstrap 3 ``` +##### 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: +``` + +``` ### 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.*_ diff --git a/demo/src/app/common/getting-started/getting-started.component.html b/demo/src/app/common/getting-started/getting-started.component.html index b6235885d6..a7a1856cf2 100644 --- a/demo/src/app/common/getting-started/getting-started.component.html +++ b/demo/src/app/common/getting-started/getting-started.component.html @@ -65,6 +65,7 @@

Getting Started

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

npm install ngx-bootstrap --save
@@ -80,7 +81,32 @@

Installation instructions

To enable bootstrap 4 theme templates in ngx-bootstrap, please read here

<!-- index.html -->
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
- + +

Method 2

+

Angular CLI ng add command will update your Angular project with the necessary ngx-bootstrap dependencies, make changes to package.json, angular.json and will execute initialization code.

+ 
ng add ngx-bootstrap
+ 
ng add ngx-bootstrap  --component componentName
+

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)

+ List of possible commands for adding appropriate component + 
+        ng add ngx-bootstrap  --component accordion
+        ng add ngx-bootstrap  --component alerts
+        ng add ngx-bootstrap  --component buttons
+        ng add ngx-bootstrap  --component carousel
+        ng add ngx-bootstrap  --component collapse
+        ng add ngx-bootstrap  --component datepicker
+        ng add ngx-bootstrap  --component dropdowns
+        ng add ngx-bootstrap  --component modals
+        ng add ngx-bootstrap  --component pagination
+        ng add ngx-bootstrap  --component popover
+        ng add ngx-bootstrap  --component progressbar
+        ng add ngx-bootstrap  --component rating
+        ng add ngx-bootstrap  --component sortable
+        ng add ngx-bootstrap  --component tabs
+        ng add ngx-bootstrap  --component timepicker
+        ng add ngx-bootstrap  --component tooltip
+        ng add ngx-bootstrap  --component typeahead
+

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):

diff --git a/demo/src/app/components/+accordion/accordion-section.components.html b/demo/src/app/components/+accordion/accordion-section.components.html index c6e9733d0f..146e2728a7 100644 --- a/demo/src/app/components/+accordion/accordion-section.components.html +++ b/demo/src/app/components/+accordion/accordion-section.components.html @@ -2,6 +2,7 @@

Displays collapsible content panels for presenting information in a limited amount of space

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.

- +

The easiest way to add an accordion component to your app (will be added to the root module)

+ 
ng add ngx-bootstrap  --component accordion
diff --git a/demo/src/app/components/+accordion/docs/usage.md b/demo/src/app/components/+accordion/docs/usage.md index 3cd5ef083c..262df79c8d 100644 --- a/demo/src/app/components/+accordion/docs/usage.md +++ b/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'; diff --git a/demo/src/app/components/+alerts/alerts-section.component.html b/demo/src/app/components/+alerts/alerts-section.component.html index 9106901ba3..e1f4bcfc70 100644 --- a/demo/src/app/components/+alerts/alerts-section.component.html +++ b/demo/src/app/components/+alerts/alerts-section.component.html @@ -1,5 +1,6 @@

Provides contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

- +

The easiest way to add an alerts component to your app (will be added to the root module)

+ 
ng add ngx-bootstrap  --component alerts
 diff --git a/demo/src/app/components/+alerts/docs/usage.md b/demo/src/app/components/+alerts/docs/usage.md index 630030c4d5..98d3c85ffd 100644 --- a/demo/src/app/components/+alerts/docs/usage.md +++ b/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'; diff --git a/demo/src/app/components/+buttons/buttons-section.component.html b/demo/src/app/components/+buttons/buttons-section.component.html index 31f39106de..a240713a9e 100644 --- a/demo/src/app/components/+buttons/buttons-section.component.html +++ b/demo/src/app/components/+buttons/buttons-section.component.html @@ -1,6 +1,7 @@

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.

- +

The easiest way to add the buttons component to your app (will be added to the root module)

+ 
ng add ngx-bootstrap  --component buttons
 diff --git a/demo/src/app/components/+buttons/docs/usage.md b/demo/src/app/components/+buttons/docs/usage.md index 7ff5205f03..c0785cdef1 100644 --- a/demo/src/app/components/+buttons/docs/usage.md +++ b/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'; diff --git a/demo/src/app/components/+carousel/carousel-section.component.html b/demo/src/app/components/+carousel/carousel-section.component.html index 08b073b0c2..a5f6d7ee9a 100644 --- a/demo/src/app/components/+carousel/carousel-section.component.html +++ b/demo/src/app/components/+carousel/carousel-section.component.html @@ -1,6 +1,7 @@

A slideshow component for cycling through elements—images or slides of text—like a carousel. Nested carousels are not supported.

- +

The easiest way to add the carousel component to your app (will be added to the root module)

+ 
ng add ngx-bootstrap  --component carousel
 diff --git a/demo/src/app/components/+carousel/docs/usage.md b/demo/src/app/components/+carousel/docs/usage.md index 0cccc8fc01..e0393442c3 100644 --- a/demo/src/app/components/+carousel/docs/usage.md +++ b/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'; diff --git a/demo/src/app/components/+collapse/collapse-section.component.html b/demo/src/app/components/+collapse/collapse-section.component.html index cc786044de..7facb766c9 100644 --- a/demo/src/app/components/+collapse/collapse-section.component.html +++ b/demo/src/app/components/+collapse/collapse-section.component.html @@ -2,6 +2,7 @@

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.

- +

The easiest way to add the collapse component to your app (will be added to the root module)

+ 
ng add ngx-bootstrap  --component collapse
diff --git a/demo/src/app/components/+collapse/docs/usage.md b/demo/src/app/components/+collapse/docs/usage.md index ac7947417c..b4879457b9 100644 --- a/demo/src/app/components/+collapse/docs/usage.md +++ b/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'; diff --git a/demo/src/app/components/+datepicker/datepicker-section.component.html b/demo/src/app/components/+datepicker/datepicker-section.component.html index ac15e36ec4..e5a8d025fc 100644 --- a/demo/src/app/components/+datepicker/datepicker-section.component.html +++ b/demo/src/app/components/+datepicker/datepicker-section.component.html @@ -4,7 +4,8 @@

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.

- +

The easiest way to add the datepicker component to your app (will be added to the root module)

+ 
ng add ngx-bootstrap  --component datepicker
diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts index 4f52d5efa1..cd0badafd8 100644 --- a/demo/src/app/components/+datepicker/datepicker-section.list.ts +++ b/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: ` +

Note: If you installed ngx-bootstrap not via ng add command, you will need to perform a several actions

Notable change is additional css for it "/datepicker/bs-datepicker.css"

There are two ways of adding css: