Server side rendered version of this documentation available
<ahref="https://ngx-universal.herokuapp.com/">here</a> served with Angular universal and <ahref="https://nestjs.com">nest.js</a>
<palign="center">
Best way to quickly integrate <ahref="https://getbootstrap.com/">Bootstrap 3</a> or <ahref="https://getbootstrap.com/docs/4.0">Bootstrap 4</a> Components with <ahref="https://angular.io/">Angular</a>
...
...
@@ -11,7 +12,6 @@ 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.
ngx-bootstrap provides Bootstrap components powered by Angular, so you don't need to include original JS components.
Check our [Getting started guide](https://valor-software.com/ngx-bootstrap/#/documentation#getting-started) if it's your first project with Angular Bootstrap.
## Usage & Demo
Bootstrap components for Angular applications, dozens of demos and API documentation could be found here:
<!-- Server side rendered version of this documentation available <a href="https://ngx-universal.herokuapp.com/">here</a> served with Angular universal and [nest.js](https://nestjs.com/). -->
## Supporting NGX-Bootstrap
ngx-bootstrap is an Open Source (MIT Licensed) project, it's an independent project with ongoing development made possible thanks to the support of our awesome backers.
...
...
@@ -56,14 +64,22 @@ All donated funds are managed transparently on OpenCollective and will be used s
What's there for you? Proper recognition and exposure of your name/logo/website on our page.
Our main sponsors will be presented under this section! Be the first!
## Installation instructions
##### Method 1
## Installation
##### Angular CLI way
Use the Angular CLI ng add command for updating your Angular project.
```bash
ng add ngx-bootstrap
```
##### Manual way
Install `ngx-bootstrap` from `npm`:
```bash
npm install ngx-bootstrap --save
```
Add needed package to NgModule imports:
Add wanted package to NgModule imports:
```
import { TooltipModule } from 'ngx-bootstrap/tooltip';
...
...
@@ -82,7 +98,7 @@ Add component to your page:
</button>
```
You will need bootstrap styles:
You will need to add bootstrap css:
-`Bootstrap 3`
```
<!-- index.html -->
...
...
@@ -94,24 +110,13 @@ You will need bootstrap styles:
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
As you may know `ngx-bootstrap` support several `bootstrap.css` versions at the same time and has automatic tool to guess current used version of library, but if this guess fails you can specify version of `bootstrap.css` manually.
Sometimes, your project might contain some library that could interfere 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 bootstrapping component (i.e. `AppComponent`):
```
import { setTheme } from 'ngx-bootstrap/utils';
...
...
@@ -125,54 +130,17 @@ export class AppComponent {
}
```
## Usage & Demo
Main source of API documentation and usage scenarios available here:
Server side rendered version of this documentation available <ahref="https://ngx-universal.herokuapp.com/">here</a> served with Angular universal and [nest.js](https://nestjs.com/).
## API
Check demo page for API [reference](https://valor-software.com/ngx-bootstrap/).
### How to use it with:
-`Bootstrap and angular-cli` please refer to [using-with-bootstrap-and-angular-cli](https://github.com/valor-software/ngx-bootstrap/tree/development/docs/getting-started/bootstrap.md)
-`angular-seed` please refer to [getting-started-with-angular-seed](https://github.com/valor-software/ngx-bootstrap/tree/development/docs/getting-started/angular-seed.md)
-`plnkr` sample available [here](https://plnkr.co/edit/0NipkZrnckZZROAcnjzB?p=preview)
-`AoT using ngc and rollup` please refer to [ngx-bootstrap-with-aot](https://github.com/valor-software/ngx-bootstrap/tree/development/docs/getting-started/aot.md)
-`ASP.NET Core 2.0` please refer to [using-with-asp.net-core-2](https://github.com/csegyud/ASPNETCore_ngx-bootstrap_Sample/blob/master/README.md)
### How to build lib for development
First time:
- clone repository
-`npm install`
-`npm run build`
If you're using Windows, run:
-`npm run build.windows` instead of `npm run build`
- You will have to install [cwRsync](https://en.wikipedia.org/wiki/CwRsync) because one of
the scripts requires `rsync`
To update your fork and prepare it for local usage:
-`git pull upstream development`
-`rm -rf node_modules`
-`npm install`
-`npm run build`
To run the demo:
-`npm run demo.serve` _*// to serve local demo. This is for testing only, without watchers.*_
For local development run:
-`npm run build.watch` _*// in first terminal*_
-`ng serve` _*// in second*_
If you want to run the demo with Angular Universal:
# ngx-bootstrap in Angular with AoT compilation using `ngc` and `rollup`
The compilation process described on the [official Angular2 website](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)
Note that you also have to include bootstrap CSS from the official Bootstrap site or Bootstrap CDN in your index.html HEAD section.
## 1. Install `ngx-bootstrap`
```bash
npm install ngx-bootstrap bootstrap --save
```
## 2. Edit Angular module
Open the module file where you want to include ngx-bootstrap (most probably `app.module.ts`) and import either specific ngx-bootstrap modules by listing them in the import statement. Then in the import array of the Angular module add:
This is extracted from the [angular-cli include bootstrap story](https://github.com/angular/angular-cli/wiki/stories-include-bootstrap) and demonstrates one way to accomplish using Bootstrap 3 or 4 with ngx-bootstrap. The `Bootstrap's` version is defined automatically by the `ngx-bootstrap`.
## Installing angular-cli
*Recommended*: to use the latest stable `angular-cli` version.
*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 ngx-bootstrap and Bootstrap
- install `ngx-bootstrap` and `Bootstrap`
```bash
npm install ngx-bootstrap bootstrap --save
```
## Using with css
### Configuring Project
Now that the project is set up it must be configured to include the Bootstrap CSS. You have two options:
- add styles to angular.json:
- Open the file angular.json from the root of your project.
- Under the property apps the first item in that array is the default application.
- There is a property styles which allows external global styles to be applied to your application.
- Specify the path to bootstrap.min.css
It should look like the following when you are done:
Server side rendered version of this documentation available
<ahref="https://ngx-universal.herokuapp.com/">here</a> served with Angular universal and <ahref="https://nestjs.com">nest.js</a>
<palign="center">
Best way to quickly integrate <ahref="https://getbootstrap.com/">Bootstrap 3</a> or <ahref="https://getbootstrap.com/docs/4.0">Bootstrap 4</a> Components with <ahref="https://angular.io/">Angular</a>
...
...
@@ -11,7 +12,6 @@ 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.
ngx-bootstrap provides Bootstrap components powered by Angular, so you don't need to include original JS components.
Check our [Getting started guide](https://valor-software.com/ngx-bootstrap/#/documentation#getting-started) if it's your first project with Angular Bootstrap.
## Usage & Demo
Bootstrap components for Angular applications, dozens of demos and API documentation could be found here:
<!-- Server side rendered version of this documentation available <a href="https://ngx-universal.herokuapp.com/">here</a> served with Angular universal and [nest.js](https://nestjs.com/). -->
## Supporting NGX-Bootstrap
ngx-bootstrap is an Open Source (MIT Licensed) project, it's an independent project with ongoing development made possible thanks to the support of our awesome backers.
...
...
@@ -56,14 +64,22 @@ All donated funds are managed transparently on OpenCollective and will be used s
What's there for you? Proper recognition and exposure of your name/logo/website on our page.
Our main sponsors will be presented under this section! Be the first!
## Installation instructions
##### Method 1
## Installation
##### Angular CLI way
Use the Angular CLI ng add command for updating your Angular project.
```bash
ng add ngx-bootstrap
```
##### Manual way
Install `ngx-bootstrap` from `npm`:
```bash
npm install ngx-bootstrap --save
```
Add needed package to NgModule imports:
Add wanted package to NgModule imports:
```
import { TooltipModule } from 'ngx-bootstrap/tooltip';
...
...
@@ -82,7 +98,7 @@ Add component to your page:
</button>
```
You will need bootstrap styles:
You will need to add bootstrap css:
-`Bootstrap 3`
```
<!-- index.html -->
...
...
@@ -94,24 +110,13 @@ You will need bootstrap styles:
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
As you may know `ngx-bootstrap` support several `bootstrap.css` versions at the same time and has automatic tool to guess current used version of library, but if this guess fails you can specify version of `bootstrap.css` manually.
Sometimes, your project might contain some library that could interfere 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 bootstrapping component (i.e. `AppComponent`):
```
import { setTheme } from 'ngx-bootstrap/utils';
...
...
@@ -125,54 +130,17 @@ export class AppComponent {
}
```
## Usage & Demo
Main source of API documentation and usage scenarios available here:
Server side rendered version of this documentation available <ahref="https://ngx-universal.herokuapp.com/">here</a> served with Angular universal and [nest.js](https://nestjs.com/).
## API
Check demo page for API [reference](https://valor-software.com/ngx-bootstrap/).
### How to use it with:
-`Bootstrap and angular-cli` please refer to [using-with-bootstrap-and-angular-cli](https://github.com/valor-software/ngx-bootstrap/tree/development/docs/getting-started/bootstrap.md)
-`angular-seed` please refer to [getting-started-with-angular-seed](https://github.com/valor-software/ngx-bootstrap/tree/development/docs/getting-started/angular-seed.md)
-`plnkr` sample available [here](https://plnkr.co/edit/0NipkZrnckZZROAcnjzB?p=preview)
-`AoT using ngc and rollup` please refer to [ngx-bootstrap-with-aot](https://github.com/valor-software/ngx-bootstrap/tree/development/docs/getting-started/aot.md)
-`ASP.NET Core 2.0` please refer to [using-with-asp.net-core-2](https://github.com/csegyud/ASPNETCore_ngx-bootstrap_Sample/blob/master/README.md)
### How to build lib for development
First time:
- clone repository
-`npm install`
-`npm run build`
If you're using Windows, run:
-`npm run build.windows` instead of `npm run build`
- You will have to install [cwRsync](https://en.wikipedia.org/wiki/CwRsync) because one of
the scripts requires `rsync`
To update your fork and prepare it for local usage:
-`git pull upstream development`
-`rm -rf node_modules`
-`npm install`
-`npm run build`
To run the demo:
-`npm run demo.serve` _*// to serve local demo. This is for testing only, without watchers.*_
For local development run:
-`npm run build.watch` _*// in first terminal*_
-`ng serve` _*// in second*_
If you want to run the demo with Angular Universal:
