Prerequisite

• Node Latest Version
• Angular Latest
• Angular CLI Latest
• SCSS
• Bootstrap four
• Font Awesome five
• NG Bootstrap
• Typescript

Setup Node.Js & NPM Environment

You must have set up present-day Node JS installation to your system.

If you do no longer know how to set up and configure Node & NPM in your machine. Then, do test out the subsequent tutorial:

Downloading and installing Node.Js and npm on macOS, Windows & Linux.

If you want to learn more about Angular, then The Complete Angular Course is a great course, to begin with.

Install Latest Angular CLI Version

Run the subsequent command to install the modern model of Angular CLI (version 9+), Ignore this step if Angular CLI is already installed.

npm install -g @angular/cli@latest

Setting up a New Angular 9 Project

A modern-day Angular mission comes with.Css files. There are some better ways to manipulate a stylesheet inside the angular emission. You can installation SCSS, SASS or LESS in our simple Angular challenge. Learn more Angularjs Online Training Hyderabad

Enter the command and hit input to installation a contemporary Angular 9 assignment:

ng new my-angular-app

? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? 
  CSS 
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
  Stylus [ http://stylus-lang.com 

In the terminal you will be asked to put in Angular Routing record, this report contains the code for handling the navigation in Angular.

Angular CLI also asks you to pick stylesheet layout from Sass, Less, Stylus, SCSS, and CSS.

cd my-angular-app

Add Bootstrap four in Angular 9 App

Bootstrap is a UI framework for developing Sleek, intuitive, and effective front-end applications.

So we are prepared to combine Bootstrap four in Angular nine utility using trendy Angular CLI.

Run the following command inside the terminal:

npm install bootstrap

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

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

Add Font Awesome 5 Icons Library in Angular

Let’s start integrating Font Awesome five icons library in our Angular task.

Type the subsequent command within the terminal and hit enter.

npm install @fortawesome/fontawesome-free-webfonts

"styles": [
      "node_modules/bootstrap/scss/bootstrap.scss",
      "src/styles.scss",
      "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.

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

Copy the icon code from FontAwesome5 website.

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

npm set up --save @ng-bootstrap/ng-bootstrap

ng serve --open

Add NGBootstrap Widget Library in Angular

NG Bootstrap is a Bootstrap widgets library, it doesn’t require any 3rd birthday celebration dependency to run the local Bootstrap widgets that run on jQuery.

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

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

Once the NgBootstrap is installed in your assignment then visit app.Module.Ts record. Import the NgbModule module and declare in the imports array:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Now you could use any of the given underneath NG Bootstrap widget for your Angular assignment.

• Tab
• Modal
• Alert
• Tooltip
• Carousel
• Collapse
• Accordion
• Pagination
• Date-picker

Import most effective required NG Bootstrap widget for your Angular template, this can assist in maintaining the overall app size.

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

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