5

I may not be able to install ngx-bootstrap to my angular 4 project and hence not able to use the predefined templates. I had gone through below two links for ngx-bootstrap installation, please guide me the right way to do it.

https://valor-software.com/ngx-bootstrap/#/getting-started

https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

Manish Jain
  • 9,569
  • 5
  • 39
  • 44
Braj Ankit
  • 333
  • 1
  • 2
  • 19

2 Answers2

5

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

Check out their official Getting Started Page on Github.

Controls and Documentation is available here.

Install ngx-bootstrap from npm:

npm install ngx-bootstrap --save

Add needed package to NgModule imports:

import { TooltipModule } from 'ngx-bootstrap/tooltip';

@NgModule({
  ...
  imports: [TooltipModule.forRoot(),...]
  ...
})

Add component to your page:

<button type="button" class="btn btn-primary"
        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Simple demo
</button>

You will need bootstrap styles:

Bootstrap 3

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

Bootstrap 4

<!--- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
RajeshKdev
  • 6,365
  • 6
  • 58
  • 80
  • do i have to install it into my project directory or I have to install it globally – Braj Ankit May 29 '18 at 06:38
  • If you are going to re-use the same library in a bunch of different projects you can install it `-g` globally. Otherwise you can install it only on your project location. – RajeshKdev May 29 '18 at 06:43
  • You can read more about this [here](https://nodejs.org/en/blog/npm/npm-1-0-global-vs-local-installation/). – RajeshKdev May 29 '18 at 06:44
2

Use this:

npm install ngx-bootstrap --save

And it's given there:

enter image description here

Prachi
  • 3,478
  • 17
  • 34