Angular: Bootstrap Install Strategies

 

Some alternatives to install bootstrap:

– manual install plus jquery via npm,
– via bootstrap’s npm install plus jquery,
– via bootstrap’s npm install plus ngx-bootstrap (with or without jquery install) or
– via bootstrap’s npm install plus ng-bootstrap (with or without jquery install).

The alternatives are tested using then code of the “Album” template from Bootstrap (image above).

This post goes step-by-step through the first three options, and the forth follows the third.

At the of the text, there is a one-step routine for installing bootstrap/ngx env.
I think it as a summary — the daily routine to set bootstrap in an angular project.

(to reach there faster, press the button of “table of contents”, below)

 

ABOUT

1. It is just considered here the “npm” installer.
Please, choose your own, since the results are equivalent.

2. “ngx-bootstrap” and “ng-bootstrap” are both libraries to enable bootstrap features that would require JQuery, but without the need of explicitly installing it.

Transcribing this snippet of comment from Stack Overflow for the sake of our comfort:

Alternative site in portuguese:
the difference between ng-bootstrap and ngx-bootstrap (portuguese)

 

 

#METHOD 1 – MANUAL INSTALL

1. Download bootstrap:

– latest version:
getbootstrap.com/

– prior versions:
v.3.3
v.3.3.7
v.4.5

2. Extract to style dir:

mkdir styles
xcopy …\bootstrap-4.5.3-dist ..\PROJECT_ROOT\src\styles /Y/S/I/E

 

3. Import the CSS.

Two alternatives:

3a. Edit “angular.json” and set:

	"styles": [
		"src/styles.css",
		"src/styles/bootstrap-4.5.3-dist/css/bootstrap.css",
	],

 

or

3b. Use import:
@import ‘./styles/bootstrap-5.0.0-beta1-dist/css/bootstrap.min.css’;

4. If desired jquery, do:
npm install jquery popper.js –save

Edit angular.json and set:

        "scripts": [
            "node_modules/jquery/dist/jquery.js",
            "node_modules/popper.js/dist/umd/popper.js",
            "node_modules/bootstrap/dist/js/bootstrap.js"
        ]

 

***IMPORTANT NOTE:

Avoid using CSS resources under assets directory.
When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.
The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.
Only place CSS files under assets if importing them directly in the index.html.

 

Download Code at GitHub

 

METHOD 2 – USING NPM INSTALLER

 

1. Install bootstrap using npm:

• For Bootstrap 3:

  npm install bootstrap@3.3.7

• For Bootstrap 4:

  npm install bootstrap@4.5.3

• For latest Bootstrap version: npm install bootstrap

2. Import the CSS.

Edit “angular.json” and set:

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles/css/album.css"
],

3. If desired jquery, do:

npm install jquery popper.js –save

Edit angular.json and set:

        "scripts": [
            "node_modules/jquery/dist/jquery.js",
            "node_modules/popper.js/dist/umd/popper.js",
            "node_modules/bootstrap/dist/js/bootstrap.js"
        ]

NOTE: you join install commands:
npm install bootstrap@4.5.3 jquery popper.js –save

 

Download Code at GitHub

OBSERVATION

Personally, I do not use the “@import” annotation. Something like this:

@import “../../../node_modules/bootstrap/dist/css/bootstrap.min.css”;

The configuration when is set in “angular.json” file is a much better option.

 

*IMPORTANT NOTE:

Don’t use the assets directory to set the CSS files. When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css. The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated. Only place CSS files under assets if importing them directly in the index.html.

 

METHOD 3 – USING NGX-BOOTSTRAP

 

1. Please, perform the same routine used for method 1 or 2.

2. Install ngx-bootstrap.

npm install ngx-bootstrap –save
or
npm i ngx-bootstrap

NOTES:

a. ng2-bootstrap is the errlier name for ngx-bootstrap.

b. Any doubt about the differences between the commands above?
For this example, using npm 6.X, they are equivalents.

More information?
Specifying dependencies and devDependencies in a package.json file
What is the –save option for npm install?

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// RECOMMENDED
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)
//import { BsDropdownModule } from 'ngx-bootstrap';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

NOTES:

a. The .forRoot() method loads each module making available all resources.

b. Alternatively, imports may be declared in a specific module if desired.

 

6. Adding the dropdown button to the html page.
Edit “app.component.html” and add an extra row to get a better visualization.

	...
	<div class="container">
		<div class="row" style="margin-bottom: 40px;">
			<div class="col-md-12">
			</div>
		</div>

 

7. Copy the code from the documentation inside the new row:

	<div class="btn-group" dropdown>
	  <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
			  aria-controls="dropdown-basic">
		Button dropdown <span class="caret"></span>
	  </button>
	  <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
		  role="menu" aria-labelledby="button-basic">
		<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>

 

8. Set inside the “div column”:

	<div class="row" style="margin-bottom: 40px;">
		<div class="col-md-12">
			<div class="btn-group" dropdown>
			  <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
					  aria-controls="dropdown-basic">
				Button dropdown <span class="caret"></span>
			  </button>
			  <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
				  role="menu" aria-labelledby="button-basic">
				<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>
		</div>
	</div>

 

9. Start the server.
cd $PROJECT_ROOT
ng serve

 

10. Point on browser:
http://localhost:4200/

 

Download Code at GitHub

SUMMARY FOR DAILY TASKS

This procedure installs: bootstrap , jquery, popper and  ngx-bootstrap.

1. Install:
npm install bootstrap jquery popper.js ngx-bootstrap –save

2a. Edit “angular.json” and set:

“styles”: [
“src/styles.css”,
“node_modules/bootstrap/dist/css/bootstrap.css”
],
“scripts”: [
“node_modules/jquery/dist/jquery.js”,
“node_modules/popper.js/dist/umd/popper.js”,
“node_modules/bootstrap/dist/js/bootstrap.js”
]

*** IMPORTANT:
If the angular project was created with other option than CSS, you must set the extension of style files.
Example: if using SCSS, switch to:
“node_modules/bootstrap/dist/css/bootstrap.scss”

3. Edit app.module.ts and set the imports.
Example:
@FROM: https://valor-software.com/ngx-bootstrap/#/dropdowns

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppComponent } from ‘./app.component’;

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
// RECOMMENDED
import { BsDropdownModule } from ‘ngx-bootstrap/dropdown’;
// NOT RECOMMENDED (Angular 9 doesn’t support this kind of import)
//import { BsDropdownModule } from ‘ngx-bootstrap’;

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent] })
export class AppModule { }

 

4. Check ngx features and configuration at:
https://valor-software.com/ngx-bootstrap/

 

5. Mini code to test the env:

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
	<a class="navbar-brand" href="#">Navbar</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarsExampleDefault">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item active">
				<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Link</a>
			</li>
			<li class="nav-item">
				<a class="nav-link disabled" href="#">Disabled</a>
			</li>
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
				<div class="dropdown-menu" aria-labelledby="dropdown01">
					<a class="dropdown-item" href="#">Action</a>
					<a class="dropdown-item" href="#">Another action</a>
					<a class="dropdown-item" href="#">Something else here</a>
				</div>
			</li>
		</ul>
		<form class="form-inline my-2 my-lg-0">
			<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
			<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
		</form>
	</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->

 

 

ADDITIONAL SOURCES

ngx-bootstrap npmjs doc

ngx-bootstrap home

ngx bootstrap | With Bootstrap 3 and 4

How to Add Bootstrap to an Angular CLI project