A Look Into Angular 7 Navbar Application Using Bootstrap 4

Introduction

 

Today, I will introduce you to the steps of setting up Angular 7. If you are a beginner to Angular, this session is meant for you. In this session, we will create a fully responsive Angular 7 application using Bootstrap and will check this application in every type of virtual device, as well as, 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.

Note
Before going through this session, please visit my previous articles related to Angular.

• Angular articles by Satyaprakash

Steps to be followed.

 

Step 1

 

This step won't take too much time as I have described how to set up Angular 6, in my previous session. Now, it's not a big deal for Angular 7 set up. Please refer to the below link.

• Angular V6.1 Environment Set-up And Steps To Fix Set-Up Issue If Any

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. You should choose the SCSS option here.

 

Check the below snap for command reference.

 

cd Angular7 

 

 

Then, you 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). If you don't know about VS code, I would suggest you visit my previous article.

 

Write the below command.

 

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, you 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 seletor can be found in the navbar.component.ts file;

<app-navbar></app-navbar>

Note 

When we ceate any componet, the selector is named as "app-componentname". 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 a 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 

 

You will get the home component inside the Pages folder. 

 

 

 

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

<app-home></app-home>

I want to add an image in the home component of the application. For this, add the below code in home.component.html. Put your 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 you 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 

 

You 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 

 

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

You 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:
  [email protected]

  </div>

You 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.html 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, I have serached 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.

 

 

<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

 

In this write-up, we have learned how to:

• install Angular CLI to create our first basic project.
• install Bootstrap 4 to generate our first component
• generate other components for routing
• add a beautiful layout to make it impressive

In my next session, I will describe the following.

• How to deploy Angular 7 app to Firebase Hosting with extra tips.