Skip to content

Latest commit

 

History

History
127 lines (97 loc) · 3.42 KB

bootstrap.md

File metadata and controls

127 lines (97 loc) · 3.42 KB
Raw

Using with Bootstrap and angular-cli

This is extracted from the angular-cli include bootstrap story 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.

npm i -g @angular/cli
ng new my-app
cd my-app
ng serve

Adding ngx-bootstrap and Bootstrap

  • install ngx-bootstrap and Bootstrap
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

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

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.