valor-software/ng2-bootstrap

# Using with Bootstrap and angular-cli

This is extracted from the [angular-cli include bootstrap story](https://github.com/angular/angular-cli/wiki/stories-include-bootstrap) and demonstates 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 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-cli.json:
   - Open the file .angular-cli.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:
   ```
   "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "styles.css"
   ],
   ```

   Note: When you make changes to .angular-cli.json you will need to re-start ng serve to pick up configuration changes.

 - add styles to index.html:
   - for Bootstrap 3:
   ```
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   ```

   - or for Bootstrap 4:
   ```
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
   ```

## Using SASS

### Configuring Project

Ensure that the project is set up to use scss by default and that the main styles file is styles.scss

The easiest way to do this is when creating a new project by
```bash
ng new my-app --style=scss
cd my-app
```

If the project has already been created then

- rename `src/styles.css` to `src/styles.scss`
- in `.angular-cli.json` make the following changes
```
"styles": [
  "styles.css" <-- rename this from .css to .scss
],
.
.
.
"defaults": {
  "styleExt": "css" <-- set this to default to .scss
}
```
Create an empty file `_variables.scss` in `src/`.

In `styles.scss` add the following:

```
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
```

## Checkout

Open `src/app/app.module.ts` and add

```typescript
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
...

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

- open `src/app/app.component.html` and add
```
<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>
```

run the app in demo mode and ensure the dropdown button functions correctly.