Open In App

Include Bootstrap in AngularJS using ng-bootstrap

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:
      ng-bootstrapexample
    • Selecting Learn Angular tab:
      ngb2
    • Edit tab cannot be selected since it has been disabled.


    Last Updated : 18 Jun, 2019
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads