Friday, July 14, 2017

How to add and use bootstrap and ng-bootstrap in Angular 2 CLI project

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
Related Posts Plugin for WordPress, Blogger...

Receive all updates via Facebook. Just Click the Like Button Below

You can also receive Free Email Updates: