Angular 7: Build Complete Application Using Bootstrap 4

Article
1/17/2024

Introduction

In this session we will understand set up of Angular 7 in our machine and also create a new project with the help of Angular CLI 7 with Visual Studio Code. We will learn how to create a fully responsive Angular 7 application using Bootstrap 4 and also check this application in every type of virtual device and real-world smartphones.

Description

In this session, we learn the following topics which will cover our requirements.

Installing Angular CLI to create our first basic project.
Installing Bootstrap 4 to generate the first component.
Generating other components for routing of the components.
Adding a beautiful layout to give it an impressive look.

Prerequisite

Visual studio code

Steps to be followed

Step 1

For Angular 7, type the below command to install Angular 7 globally on your machine.

      npm i -g @angular/cli

Then, type the below command to check if Angular CLI is correctly installed or not.

      ng version

Step 2

Let us get into generating our first Angular 7 project.

Type the below command to create a new Angular 7 project; it will prompt you to a command message for adding Angular routing and the answer should be 'Yes'. Similarly, the other one will ask which style sheet format would you like to use. We should choose the SCSS option here.

Check the below snap for command reference.

      cd Angular7

Then, We can see that some process has been started, as shown in the below snapshot.

Now, our project is generated.

Let's open our project in Visual Studio Code (VS Code).

Write the below command in Visual Studio Terminal,

      cd Angular7        /Angular7/code .

Then, to see the output, type the below command for both - to compile and to open the application.

      ng serve -o

Step 3

Let us see how to install Bootstrap 4.1.3 in Angular 7 applications. For this, visit the below link.

npm Bootstrap 4

Type the following command to install Bootstrap 4 on your machine.

      npm i bootstrap

Then, we should declare a Bootstrap library in Angular.json file. It will locate the Bootstrap CSS file.

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

Then, to get an output, serve the app.

Now, visit the official Bootstrap website.

bootstrap 4

As our first component, we will create a navbar. So, search for navbar in the search box.

Type the below command to create a navbar component. Here, g stands for generating and c stands for the component.

ng g c template/navbar

After successful creation, the navbar folder will be created with all the navbar components in it.

Then, we should paste this code for bootstrap navbar inside the navbar.component.html file.

<!-- <nav class="navbar navbar-light bg-dark">  
  <span class="navbar-brand mb-0 h1 text-light">Navbar By Satyaprakash</span>  
</nav> -->

Let us now declare the navbar component using selector inside the app.component.html file. The app-navbar selector can be found in the navbar.component.ts file;

<app-navbar></app-navbar>

Note

When we create any component, the selector is named as "app-component name". Here, since we have created a navbar component, the selector will be named as app-navbar.

Let us serve the app to see the output.

Step 4

We should add color to the navbar. To do so, go to bootstrap official site and search for background colors. We have found .bg-primary class. So, replace the bg-dark class with bg-primary.

<!-- <nav class="navbar navbar-light bg-primary">    
  <span class="navbar-brand mb-0 h1 text-light">SATYAPRAKASH SAMANTARAY'S RECOGNITIONS AND AWARDS</span>    
</nav> -->

Let's generate our Home component. To do so, type the below command in VS Code terminal.

ng g c pages/home

We will get the home component inside the Pages folder.

Now, let us declare the home component inside the app component.

<app-home></app-home>

We add an image to the home component of the application. For this, add the below code in home.component.html. Put our image in the assets folder. This folder is meant to hold images, audios, and video files of your application.

<div class="container text-center pb-5 pages">  
<h1>Satyaprakash Samantaray</h1>  
<img src="../../../assets/Satya.jpg" class="img-fluid pt-5" alt="Satyaprakash">  
</div>

The application will look something like below.

Let's test it for smartphones by using the "Browser Inspect Element". As we can see, the content is fully responsive.

Step 5

Here, we should generate a footer component to set the footer section of our Angular 7 application. Type the below command to generate the

footer component.

ng g c  template/footer

We can find out the footer component in the below snapshot.

Let's declare a footer component like other components in app.component.html file.

<app-footer></app-footer>

Then, let us shape our footer section by putting some copyright stuff.

<div class="bg-dark text-light text-center p-5 m-0">  
Copyright © 2018 - Satyaprakash  
</div>

The result is shown below.

To adjust the layout of the application, add style in app.component.scss and style.scss.

.main-view{ 
    min-height: 100vh;  
} 
.pages{ 
    padding-top: 54px; 
}

Step 6

In this step, we shall generate the about and contact components to make the application look better. Type the below commands respectively in the terminal of VS Code.

ng g c pages/about
ng g c pages/contact

We can see the below "about" and "contact" component folders as expected.

Let's declare the about component like other components in app.component.html file.

<app-about></app-about>

To about.component.html, add the below code.

<div class="container pages text-justify pb-5"> 
<h1 class="mb-4">About Me</h1> 
I am passionate about Microsoft .NET technology and likes to share knowledge with the .NET developer's community.  
I am a contributor in Microsoft and the ASP.NET developer community. 
    
MVP Award Winner | Community Author | S/W Developer & Programmer |  
Blogger | Community Award Winner | Most Valuable Blogger(MVB). 
    
</div>

We can see the output as expected.

Let's declare the contact component like other components in app.component.html file.

<app-contact></app-contact>

In contact.component.html, add the below code.

<div class="container pages text-justify pb-5"> 
  <h1 class="mb-4">Contact Me</h1> 
  Please mail me on the below-mentioned mail-id: 
  satyatohome@gmail.com 
</div>

We can see the output as expected.

Let's work on navbar for routing the components using the above components like Home, About, and Contact. For this, we should add some code in app-routing.module.ts which contains all the routing information. Here, we shall add 3 routers to declare.

Let's add the below code snippet in app-routing.module.ts for routing the components.

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
    
import {HomeComponent} from './pages/home/home.component'; 
import {AboutComponent} from './pages/about/about.component'; 
import {ContactComponent} from './pages/contact/contact.component'; 
const routes: Routes = [ 
{path: '',component: HomeComponent}, 
{path: 'about',component: AboutComponent}, 
{path: 'contact',component: ContactComponent}, 
]; 
@NgModule({ 
  imports: [RouterModule.forRoot(routes)], 
  exports: [RouterModule] 
}) 
export class  AppRoutingModule { }

Here, you can see these 3 components with their respective paths have been added for the routing purpose. We should explicitly declare the paths of each component.

import {HomeComponent} from './pages/home/home.component';   
import {AboutComponent} from './pages/about/about.component';   
import {ContactComponent} from './pages/contact/contact.component';

We shall add the router-outlet selector in app.component.html which will manage all the routers declared in app-routing.module.ts file.

<div class="main-view"> 
    <app-navbar></app-navbar> 
    <router-outlet></router-outlet> 
</div> 
<app-footer></app-footer>

We would add the code snippet in navbar.component.html file for mapping the buttons (the button names are nothing but the component names) to the routes using routerLink attribute.

<nav class="navbar navbar-light" style="background-color:#f60;"> 
  <span class="navbar-brand mb-0 h1 text-light" routerLink="/"><i class="fas fa-award"></i> Profile</span> 
  <span class="mr-auto"></span> 
  <button class="btn btn-info mr-2" routerLink="/about">About</button> 
  <button class="btn btn-info" routerLink="/contact">Contact</button> 
</nav>

To add a pointer cursor on mouse hover, add this style to the navbar.component.scss file.

.navbar-brand{ 
    cursor: pointer; 
    outline:none; 
    font-weight:700; 
    font-style:italic; 
}

Step 7

In this last step, let us see how to add some extra styles to our Angular 7 application to prepare a nice looking website. Here, we shall add a profile logo image to our navbar brand. To get it, visit the below mentioned URL.

Get free profile logo

We need to add the CDN reference to our index.cshtml file.

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title>Satyaprakash-Angular Developer</title> 
  <base href="/"> 
    
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="icon" type="image/x-icon" href="favicon.ico"> 
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> 
</head> 
<body> 
  <app-root></app-root> 
</body> 
</html>

Here, We have searched for an award logo to attach to my navbar brand. For that, copy the HTML as shown in the below snap.

Then, add this copied HTML code to the navbar.component.html file before the profile text.

<span class="navbar-brand mb-0 h1 text-light" routerLink="/"><i class="fas fa-award"></i> Profile</span>

Step 8

Let us find a nice looking font-family for our Angular 7 application. To do so, we can use Google Fonts Library. Visit the below URL for that.

Google Fonts

Here, we can customize the fonts as per our needs. So, based on the selection, we can import the library as per our fonts customization.

[

](resources/8875.j.png)

<style> 
@import url('https://fonts.googleapis.com/css?family=Niramit:400,500,700i'); 
</style>

We need to add this library to our style.scss file as well. Before continuing, we have to actually declare the font family globally in our application. In that way, all the components will get the benefits of it. We shall use app-root selector in the style.scss file.

@import url('https://fonts.googleapis.com/css?family=Niramit:400,500i,700i'); 
.pages{ 
    padding-top: 54px; 
} 
    
app-root{ 
    font-family: Niramit; 
} 
    
h1{ 
font-weight: 500; 
font-style:italic; 
}

Now, all the components are declared in the app.component file and are displayed in Niramit fonts.

OUTPUT

Finally, our Angular 7 application is completed with proper design and look. Let's check the output.

For "About" navigation.

For "Contact" navigation.

Let's check the application for using in the smartphones.

Summary

Install Angular CLI to create our basic first project
Install Bootstrap 4 to generate our first component
Generate other components for routing
Add a beautiful layout to make it impressive

Share via