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 src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> 
    </script> 
      
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> 
    </script> 
      
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"> 
    </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.

My Personal Notes

Recommended Posts: