Learn Free Angular

How to Setup Angular 6 Project using Bootstrap 4, SASS, Font Awesome5 and Ng Bootstrap?

Rawat Digamber /  Read Time: 4 minutes
Setup Angular 6 Project

Hi’ I’m going to share with you how you can set up a basic Angular6 project using SASS, Bootstrap4, Font Awesome5, and Ng Bootstrap from scratch.

1. Prerequisite

Setup Node JS development environment

Before we move further I’m assuming you already have Node JS development environment set up in your system.

If not then go through How to Set up Node JS Development Environment in Your System?

Install Angular CLI

Install Angular CLI, Ignore this step if Angular CLI is already installed.

npm install -g @angular/cli

2. Technologies Used

  • Node 8.11.1
  • Angular 6.0.0
  • Angular CLI 6.0.0
  • SCSS
  • Bootstrap4
  • Font Awesome5
  • NG Bootstrap
  • Typescript 2.7.2

3. GitHub project files

Download Files from here: https://bit.ly/2NVI6iQ

4. Would you prefer video tutorial?

If you like this tutorial, Please subscribe us on YouTube.

5. How to Setup a new Angular 6 project using Sass?

A brand new angular project comes with .css files. There are some better ways to manage a stylesheet in the angular project. You can set up SCSS, SASS or LESS in our basic Angular project.

Use any of the given below command to tell Angular CLI to generate either .scss / .sass or less files structure with basic Angular6 project.

  • --style=scss
  • --style=sass
  • --style=less

Let’s create a fresh new angular6 project using SCSS.

ng new my-angular-app --style=scss

Once the Angular project is installed then don’t forget to get into the project folder by using the following command.

cd my-angular-app

6. Integrate Bootstrap4 in the Angular project.

So we are all set to integrate Bootstrap4 CSS framework with our newly installed Angular6 project using angular CLI.

Just run this magical command in terminal.

npm install bootstrap

7. Best way to manage SASS files in the Angular project

When we work on any software development project we must create easily manageable and understandable code and files structure.

why should we focus on this?

Because if we or somebody else required to edit or update it later can do it easily.

Some tips for better CSS manageability

  • Must keep all the styles related files in one folder
  • Create component based stylesheets and import into the main styles.scss
  • Use the proper naming convention for stylesheet files
  • Use the proper naming convention for CSS classes and ids

Go to my-angular-project > src > create scss folder > put all your style related files here e.g. styles.scss, variables.scss, header.scss, footer.scss etc...

Keep all the styles related files in scss folder and don’t forget to import those files in styles.scss like given below.

Manage Sass files in Angular project

For the better manageability, we keep styles.scss file inside the scss folder then changes the path in the angular.json file like given below.

Once, the Bootstrap is downloaded in your project, then register bootstrap.scss and styles.scss files within the angular.json file.

"styles": [
     "node_modules/bootstrap/scss/bootstrap.scss",
     "src/scss/styles.scss"
]

9. How to Add Font Awesome5 icons set in the Angular project?

Let’s start our 4th step by integrating Font Awesome5 icons set in our Angular project. Type the following command in Angular CLI and hit enter.

npm install @fortawesome/fontawesome-free-webfonts

Then go to angular.json file and add the following lines of code in styles array to include the Font Awesome5 icons set in your app.

"styles": [
          "node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
          "node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
          "node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
          "node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
]

Afterwards, You can easily use any Font Awesome5 icons in your project.

Just visit Font Awesome5 website and search for any free icon you’d like to use in your project.

Search FontAwesome5 Icons

Copy the icon code from FontAwesome5 website.

Copy FontAwesome Code

Go to your any app.component.html file and paste the given below code.

<i class="fab fa-angular"></i>

Please don’t forget to restart the server. When you make any changes in theangular.json file. Otherwise, changes won’t reflect in your Angular project. Use the given below command in Angular CLI.

ng serve --open

9. How to include NG Bootstrap widget library in the Angular project?

NG Bootstrap is a Bootstrap widgets library, it doesn’t require any 3rd party JavaScript/jQuery dependency.

To setup, NG Bootstrap run the following command in Angular CLI

npm install --save @ng-bootstrap/ng-bootstrap

Once the NG Bootstrap is installed in your project then go to app.module.ts file and import the NG Bootstrap module and declare it in the imports array like given below.

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

@NgModule({
  ...
  imports: [NgbModule, ...],
  ...
})
export class YourAppModule {
}

Now you can use any of the given below NG Bootstrap widget in your project.

e.g. Carousel, Modal, Accordion, Collapse, Tab, Pagination, Tooltip, Date picker, Alert etc…

Import only required NG Bootstrap widget in your angular component. This will help in maintaining the overall app size.

import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbPaginationModule, NgbAlertModule, ...],
  ...
})
export class YourAppModule {
}

Conclusion

I’ve created this tutorial to speed up our development process. Focusing on Not wasting time on thinking about which framework to use for basic Angular project setup. Managing the CSS files in a better way. Including external dependencies like Font Awesome, Bootstrap, NG Bootstrap in your Angular project.

Written by Digamber

I am passionate about solving real-world problems through algorithms and functional design. I create digital products that make the user’s life easy using the latest programming languages and frameworks. e.g Angular 2+, Firebase Real-time Database, JavaScript, TypeScript, RxJS, Bootstrap, HTML5, CSS3, WordPress etc...