ng2-bootstrap-base-modified
Version:
Native Angular Bootstrap Components Typeahead modified
130 lines (93 loc) • 3.7 kB
Markdown
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 4 with ng2-bootstrap.
The important thing to note is the final section - you must let ng2-bootstrap know you are using Bootstrap 4 as it assumes BS3 by default.
*Important*: please check `angular-cli` version, it should be => "1.0.0-beta.24 (at the time or writing it is at 1.0.0-rc.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
```
- install `ng2-bootstrap` and `bootstrap 4`
```bash
npm install ng2-bootstrap bootstrap@next --save
```
Now that the project is set up it must be configured to include the bootstrap CSS.
- 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.
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.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:
```
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
```
Open `/src/index.html` and add the following markup:
```html
<body>
<!-- Enable bootstrap 4 theme -->
<script>window.__theme = 'bs4';</script>
<app-root> </app-root>
</body>
```
- open `src/app/app.module.ts` and add
```typescript
import { DropdownModule } from 'ng2-bootstrap/dropdown';
...
@NgModule({
...
imports: [Dropdown.forRoot(), ... ],
...
})
```
- open `src/app/app.component.html` and add
```
<div class="btn-group" dropdown>
<button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
Button dropdown <span class="caret"></span>
</button>
<ul dropdownMenu role="menu" aria-labelledby="single-button">
<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.