Include Bootstrap in AngularJS using ng-bootstrap
AngularJS can be integrated with Bootstrap CSS and Javascript and can be used to create creative forms, tables, navigation bars, etc.
Steps:
- Make sure the Angular CLI present in your system if not then run the command in the terminal to do so.
npm install -g @angular/cli
- Create a new project on visual studio code by running the code ng new project-name.
- After creating new project, open that project on visual studio and its terminal make sure the path are in the directory of the new created project. Then run the following commands.
npm install bootstrap@4.0.0-alpha.6 --save npm install --save @ng-bootstrap/ng-bootstrap npm install jquery --save
- Import the NgbModule in app.module.ts by using import { NgbModule } from ‘@ng-bootstrap/ng-bootstrap’; and also include it in the imports: list.
imports: [ BrowserModule, NgbModule.forRoot() ],
- Make the following additions in the angular.json/angular-cli.json which is available in visual studio code.
"styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js" ],
There are two styles[] and scripts[] section in the angular.json so we have to add this part in the first section only. Also make sure that “./node_modules/bootstrap/dist/css/bootstrap.min.css” is written above “src/styles.css”. There is no need to include .js files because native Angular directives are based on Bootstrap’s markup and CSS and not on jQuery or Bootstraps javascript.
Index.html
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>
Include Bootstrap in AngularJS
</
title
>
<
base
href
=
"/"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"icon"
type
=
"image/x-icon"
href
=
"favicon.ico"
>
</
head
>
<
body
>
<
app-root
>
loading...
</
app-root
>
</
body
>
</
html
>
This code is only to display “loading…” before the app.component.html actually gets loaded.
app.component.html
<!DOCTYPE html>
<
html
>
<
head
>
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
ngb-tabset
>
<
ngb-tab
title
=
"Welcome"
>
<
ng-template
ngbTabContent>
Welcome to GeeksforGeeks
</
ng-template
>
</
ngb-tab
>
<
ngb-tab
>
<
ng-template
ngbTabTitle>
Learn <
b
>Angular</
b
>
</
ng-template
>
<
ng-template
ngbTabContent>
Refer various Angular articles available
in GeeksforGeeks.
</
ng-template
>
</
ngb-tab
>
<
ngb-tab
title
=
"Edit"
[disabled]="true">
<
ng-template
ngbTabContent>
<
p
>
Make various changes in the
code and explore
</
p
>
</
ng-template
>
</
ngb-tab
>
</
ngb-tabset
>
</
div
>
</
body
>
Output:
- Selecting Welcome tab:
- Selecting Learn Angular tab:
- Edit tab cannot be selected since it has been disabled.
- Selecting Welcome tab: