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.
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.
For Angular 7, type the below command to install Angular 7 globally on your machine.
 
npm i -g @angular/cli 
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
Then, type the below command to check if Angular CLI is correctly installed or not.
 
ng version 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
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 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
Then, you can see that some process has been started, as shown in the below snapshot.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
Now, our project is generated.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
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 .
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
Then, to see the output, type the below command for both - to compile and to open the application.
 
ng serve -o
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
Step 3
 
Let us see how to install Bootstrap 4.1.3 in Angular 7 applications. For this, visit the below link.
Type the following command to install Bootstrap 4 on your machine.
 
npm i bootstrap  
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
Then, we should declare a Bootstrap library in Angular.json file. It will locate the Bootstrap CSS file.
  1. "styles": [  
  2.               "src/styles.scss",  
  3.               "node_modules/bootstrap/dist/css/bootstrap.min.css"  
  4.             ],  
Then, to get an output, serve the app.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
Now, visit the official Bootstrap website.
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 
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
After successful creation, the navbar folder will be created with all the navbar components in it.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
Then, you should paste this code for bootstrap navbar inside the navbar.component.html file.
  1. <!-- <nav class="navbar navbar-light bg-dark">  
  2.   <span class="navbar-brand mb-0 h1 text-light">Navbar By Satyaprakash</span>  
  3. </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;
  1. <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.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4
 
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.
  1. <!-- <nav class="navbar navbar-light bg-primary">    
  2.   <span class="navbar-brand mb-0 h1 text-light">SATYAPRAKASH SAMANTARAY'S RECOGNITIONS AND AWARDS</span>    
  3. </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. 
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
Now, let us declare the home component inside app component. 
  1. <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.
  1. <div class="container text-center pb-5 pages">  
  2. <h1>Satyaprakash Samantaray</h1>  
  3. <img src="../../../assets/Satya.jpg" class="img-fluid pt-5" alt="Satyaprakash">  
  4. </div>  
The application will look something like below.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4
 
Let's test it for smartphones by using the "Browser Inspect Element". As you can see, the content is fully responsive.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
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.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
Let's declare a footer component like other components in app.component.html file.
  1. <app-footer></app-footer>  
Then, let us shape our footer section by putting some copyright stuff.
  1. <div class="bg-dark text-light text-center p-5 m-0">  
  2. Copyright © 2018 - Satyaprakash  
  3. </div>  
The result is shown below.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
To adjust the layout of the application, add style in app.component.scss and style.scss.
  1. .main-view{  
  2.     min-height100vh;  
  3.       
  4. }  
  1. .pages{  
  2.     padding-top54px;  
  3. }  
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.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
Let's declare the about component like other components in app.component.html file.
  1. <app-about></app-about>     
To about.component.html, add the below code.
  1. <div class="container pages text-justify pb-5">  
  2. <h1 class="mb-4">About Me</h1>  
  3. I am passionate about Microsoft .NET technology and likes to share knowledge with the .NET developer's community.   
  4. I am a contributor in Microsoft and the ASP.NET developer community.  
  5.   
  6. MVP Award Winner | Community Author | S/W Developer & Programmer |   
  7. Blogger | Community Award Winner | Most Valuable Blogger(MVB).  
  8.   
  9. </div>  
You can see the output as expected.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4
 
Let's declare the contact component like other components in app.component.html file.
  1. <app-contact></app-contact>       
In contact.component.html, add the below code. 
  1. <div class="container pages text-justify pb-5">  
  2.   <h1 class="mb-4">Contact Me</h1>  
  3.     
  4.   Please mail me on the below-mentioned mail-id:  
  5.   [email protected]  
  6.     
  7.   </div>  
You can see the output as expected.
 
 A Look Into Angular 7 Navbar Application Using Bootstrap 4
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.
  1. import { NgModule } from '@angular/core';  
  2. import { Routes, RouterModule } from '@angular/router';  
  3.   
  4. import {HomeComponent} from './pages/home/home.component';  
  5. import {AboutComponent} from './pages/about/about.component';  
  6. import {ContactComponent} from './pages/contact/contact.component';  
  7.   
  8. const routes: Routes = [  
  9. {path: '',component: HomeComponent},  
  10. {path: 'about',component: AboutComponent},  
  11. {path: 'contact',component: ContactComponent},  
  12. ];  
  13.   
  14. @NgModule({  
  15.   imports: [RouterModule.forRoot(routes)],  
  16.   exports: [RouterModule]  
  17. })  
  18. 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.
  1. import {HomeComponent} from './pages/home/home.component';    
  2. import {AboutComponent} from './pages/about/about.component';    
  3. 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.
  1. <div class="main-view">  
  2.     <app-navbar></app-navbar>  
  3.     <router-outlet></router-outlet>  
  4. </div>  
  5. <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.
  1. <nav class="navbar navbar-light" style="background-color:#f60;">  
  2.   <span class="navbar-brand mb-0 h1 text-light" routerLink="/"><i class="fas fa-award"></i> Profile</span>  
  3.   <span class="mr-auto"></span>  
  4.   <button class="btn btn-info mr-2" routerLink="/about">About</button>  
  5.   <button class="btn btn-info" routerLink="/contact">Contact</button>  
  6. </nav>  
To add a pointer cursor on mouse hover, add this style to the navbar.component.scss file.
  1. .navbar-brand{  
  2.     cursorpointer;  
  3.     outline:none;  
  4.     font-weight:700;  
  5.     font-style:italic;  
  6. }  
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.
We need to add the CDN reference to our Index.html file.
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Satyaprakash-Angular Developer</title>  
  6.   <base href="/">  
  7.   
  8.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  9.   <link rel="icon" type="image/x-icon" href="favicon.ico">  
  10.   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">  
  11. </head>  
  12. <body>  
  13.   <app-root></app-root>  
  14. </body>  
  15. </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.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
Then, add this copied HTML code to the navbar.component.html file before the profile text.
  1. <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.
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.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
  1. <style>  
  2. @import url('https://fonts.googleapis.com/css?family=Niramit:400,500,700i');  
  3. </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.
  1. @import url('https://fonts.googleapis.com/css?family=Niramit:400,500i,700i');  
  2. .pages{  
  3.     padding-top54px;  
  4. }  
  5.   
  6. app-root{  
  7.     font-family: Niramit;  
  8. }  
  9.   
  10. h1{  
  11. font-weight500;  
  12. font-style:italic;  
  13. }  
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.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
For "About" navigation.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4
 
For "Contact" navigation. 
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4
 
Let's check the application for using in the smartphones.
 
A Look Into Angular 7 Navbar Application Using Bootstrap 4 
 
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.


Similar Articles