How to install ngx-bootstrap to my angular 4 project

angular ngx-bootstrap-modal
Braj Ankit picture Braj Ankit · May 29, 2018 · Viewed 11.5k times · Source

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/

Answer

RajeshKdev picture RajeshKdev · May 29, 2018

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">

Related questions

How to center an ngx-bootstrap modal

Trying to center this ngx-boostrap modal using CSS like this but it's not working: .modal.fade.in{ display: flex; justify-content: center; align-items: center; } But in the dev tool, I'm able to add CSS like this: .modal.dialog{ top: 50% } So at …

Read More
Way to add custom class when using ngx-bootstrap modalService

When looking to the ngx-bootstrap source code here: modal-options.class.ts There is an optional class property defined as class?: string;. What is the way to use it ? Is it possible to add a custom class like: this.modalService.config.…

Read More
How pass data from ModalService into component

I'm trying to use ngx-bootstrap-modal to pass data from a modal service into a modal component. The examples show this: this.modalService.show(ModalContentComponent, {initialState}); But it doesn't show how the ModalContentComponent actually consumes that state. I've played around in …

Read More