Category: ngx-bootstrap

Follow the below steps for adding Bootstrap and ng-bootstrap (Bootstrap components, powered by Angular) to an Angular-2 app created using Angular CLI

Add Bootstrap

1. Goto the project directory and open Command in Windows / terminal in Mac

2. npm install bootstrap@4.0.0-alpha.6 --save //in Windows

   sudo npm install bootstrap@4.0.0-alpha.6 --save //in Mac

3. In project root folder, find and open the file ‘angular-cli.json’ in any editor 
4. Locate the styles[] array and add font-awesome references directory. like:

   "apps": [
             {
               ....
               "styles": [
                 "../node_modules/bootstrap/dist/css/bootstrap.min.css",
                 "styles.css"
               ],
               ...
            }
          ]
   

5. Use bootstrap snippet in any html file
6. Run the server by command

   ng serve

Add ng-botstrap (Bootstrap components, powered by Angular)

1. Goto the project directory and open Command in Windows / terminal in Mac

2. npm install --save @ng-bootstrap/ng-bootstrap //in Windows

   sudo npm install --save @ng-bootstrap/ng-bootstrap //in Mac

3. Open src/app/app.module.ts
4. Import ng-bootstrap main module

   import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

5. Add the imported module in imports array

   @NgModule({
      imports: [NgbModule.forRoot(),...]
   })
   

6. Open src/app/app.component.html and use the alert component

   
   
       Warning! Better check yourself, you're not looking too good.
   
   

7. Run the server by command

   ng serve

8. Bootstrap themed alert will be visible now