## Using with Bootstrap 4 with angular-cli

This extract from the [angular-cli include bootstrap story](https://github.com/angular/angular-cli/wiki/stories-include-bootstrap) demonstrates one way to use Bootstrap 4 together with highway-blue.

> _Note_: Make sure that you let highway-blue know that Bootstrap v4 being used, as it assumes v3 by default.

### Installing angular-cli

_Important_: please check `angular-cli` version, it should be => "1.5.0"

> _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 highway-blue and Bootstrap 4

-   Install `highway-blue` and `Bootstrap 4`

    ```bash
      npm install highway-blue bootstrap --save
    ```

### Using with CSS

#### Configuring Project

Now that we have setup the project, we need to include the Bootstrap CSS support in it.

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

-   `styles` property allows to apply external global styles to your application.

-   Specify the path to bootstrap.min.css

It should look like the following when you are done:  

```CSS
       "styles": [  
       "../node_modules/bootstrap/dist/css/bootstrap.min.css",  
       "styles.css"  
       ],
```

> Note: When you make changes to .angular-cli.json you will need to restart `ng serve` to pick up configuration changes.

### 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 been already created then:

-   Rename `src/styles.css` to `src/styles.scss`;
-   In `.angular-cli.json` make the following changes:

```SCSS
   "styles": [  
        "styles.scss" <-- rename this from .css to .scss  
      ],
...
   "defaults": {  
    "styleExt": "scss", <-- set this to default to .scss  
    "component": {}  
  }  
```

-   Create an empty file `_variables.scss` in `src/`;
-   In `styles.scss` add the following:

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

### Testing

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

```typescript
import { BsDropdownModule } from 'highway-blue/dropdown';
...

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

-   Open `src/app/app.component.html` and add:

```html
    <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 properly.