Posted on

How to add font-awesome to Angular 2 CLI project

Follow the below steps for adding Font Awesome to an Angular-2 app created using Angular CLI

  1. Goto the project directory and open Command in Windows / terminal in Mac
  2. npm install font-awesome --save //in Windows
    sudo npm install font-awesome --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/font-awesome/css/font-awesome.css"
                  "styles.css"
                ],
                ...
             }
           ]
  5. Add some font-awesome icons in any component html file. 
  6. Rerun the server by command 
    ng serve

    as ‘angular-cli.json’ is not observed for changes.

  7. Awesome Icons will be visible now
Posted on

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