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

Step by step Explanation

  1. Prerequisite
  2. Technologies used
  3. GitHub project files
  4. How to Setup a new Angular 6 project using Sass?
  5. Integrate Bootstrap4 in the Angular project.
  6. Best way to manage Sass files in the Angular project.
  7. How to Add Font Awesome5 icons set in the Angular project?
  8. How to include NG Bootstrap widget library in the Angular project?

1. Prerequisite

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. 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

5. 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

6. 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"
]

8. 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.