Build Navigation In Angular App

Introduction

Today, there are several JavaScript frameworks and libraries available for developers but Angular is one of the most popular frameworks for building complex Web applications using JavaScript. Angular is the most versatile and complete JavaScript framework among them all. Web applications developed in Angular are fast, maintainable, and support progressive web and native features.

Angular also lets you build and use components to save you development time. Infragistics is one of the companies that provides built-in Angular components to put your Angular application on the fast track.

Website navigation is one of the common controls used on websites to provides the entire navigation of a website. Infragistics provides the Navigation Drawer control that can be used to quickly build the same functionality.

In this article, I will show you how to integrate a website navigation functionality to your web app using Infragistics’s Navigation Drawer.

In this article, we will learn the following,

Install Ignite UI for Angular
Create Angular Project with Ignite UI
Introduction to Navigation Drawer
Implement the navigation drawer
Adding child pages
Conclusion

Introduction To Navigation Drawer

Ignite UI provides a Navigation Drawer component for Angular that is a side navigation container. It can be placed above the content and also have a slide in/out of view or be pinned to expand/collapse within some content. This component is fully customizable and can use default menu item styling.

Install Ignite UI for Angular

First make sure, you have the latest version of node and npm installed. If you are new to npm, check out the npm documentation here https://docs.npmjs.com/cli/install.

Open the command prompt and run the following npm command to install Ignite UI.

npm install -g igniteui-cli

Create an Angular Project with Ignite UI

To create an angular project with Ignite UI, run the following command.

ng new nav-drawer-demo

Get in to the project using below command,

cd nav-drawer-demo

Now it’s time to install the Ignite UI for this project. Run the following command:

npm install igniteui-angular

After installing Ignite UI for our project, add the required Ignite UI styles and the HammerJs library in the angular-cli.json.

Open the .angular-cli.json from the root of the project and add below code snippet as shown Listing 1.

"styles": [
"../node_modules/igniteui-angular/styles/igniteui-angular.css"
]
"scripts": ["../node_modules/hammerjs/hammer.min.js"]

Listing 1.

Now we have configured Ignite UI with our angular project successfully.

Implement the Navigation Drawer

To add the Navigation Drawer, we need to add the dependencies.

Open the app.module.ts and import the component for IgxNavigationDrawerModule. See Listing 2.

import { IgxNavigationDrawerModule} from 'igniteui-angular/main';
//Or
import { IgxNavigationDrawerModule} from 'igniteui-angular/navigation-drawer;

Listing 2.

And also add the IgxNavigationDrawerModule. See Listing 3.

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

Listing 3.

To add the html markup, open the app.component.html and write the code in Listing 4.

<div class="content-wrap">
<igx-nav-drawer id="navigation" #drawer [isOpen]="true">
<ng-template igxDrawer>
<nav> <span igxDrawerItem [isHeader]="true"> Dashboard</span> <span igxDrawerItem igxRipple> Edit Profile</span> <span igxDrawerItem igxRipple [active]="true"> View Profile</span> <span igxDrawerItem igxRipple> Setting</span> <span igxDrawerItem [isHeader]="true"> Privacy</span> <span igxDrawerItem igxRipple> Photo Uploads</span> <span igxDrawerItem igxRipple> Logout </span> </nav>
</ng-template>
</igx-nav-drawer>
<main>
<span igxButton="icon" igxToggleAction="navigation" [closeOnOutsideClick]="false">
<igx-icon fontSet="material" name="menu"></igx-icon>
</span> </main>
</div>

Listing 4.

The above code snippet and is enough to show a basic navigation drawer with minimum functionality in a web page.

Now, let’s use the following command.

ng serve

And open the web application in a web browser using http://localhost:4200.

Figure 1.

As you can see from Figure 1, a web page with simple navigation in the left side is created.

Add the child page

We just added a simple navigation to a web page in the above section. Now, let’s attach some child page links to these navigation links.

Create three new components named EditProfile , ViewProfile, NotFound using the following commands.

ng generate component edit-profile

ng generate component view-profile

ng generate component not-found

Add three HTML files with simple text in them. These will be three pages that we will link to the link in the navigation control.

“edit-profile.component.html”

<h1 style="text-align:center">Edit Profile Page</h1>

“view-profile.component.html”

<h1 style="text-align:center">View Profile Page</h1>

“not-found.component.html”

<h1 style="text-align:center">Page Not Profile Page</h1>

Add the Routing for the pages

Now, let’s add routing import the following modules in Listing 5.

import { RouterModule, Routes } from '@angular/router';

Also add the following code shown in listing 10.

const appRoutes: Routes = [{
path: 'not-found',
component: NotFoundComponent
}, {
path: 'edit-profile',
component: EditProfileComponent
}, {
path: 'view-profile',
component: ViewProfileComponent
}];
@NgModule({
declarations: [
imports: [
IgxNavigationDrawerModule,
RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})

Listing 5.

Now open the app.component page and add the following code snippet to inject the router in constructor.

import {
Router
} from '@angular/router';
constructor(private router: Router) {}

Listing 6.

Now we have enabled the routing in our project.

Let’s add the RounterLink in the navigation Drawer so we can open the edit and view profile pages in the main area of the navigation drawer.

Open the app.components.html page and add the following code snippet in Listing 7.

<div class="content-wrap">
<igx-nav-drawer id="navigation" #drawer [isOpen]="true">
<ng-template igxDrawer>
<nav> <span igxDrawerItem [isHeader]="true"> Dashboard</span> <span igxDrawerItem igxRipple routerLink="/edit-profile">Edit Profile</span> <span igxDrawerItem igxRipple routerLink="/view-profile">View Profile</span> <span igxDrawerItem igxRipple routerLink="/not-found"> Setting</span> <span igxDrawerItem [isHeader]="true"> Privacy</span> <span igxDrawerItem igxRipple routerLink="/not-found"> Photo Uploads</span> <span igxDrawerItem igxRipple routerLink="/not-found"> Logout </span> </nav>
</ng-template>
</igx-nav-drawer>
<main> <span igxButton="icon" igxToggleAction="navigation" [closeOnOutsideClick]="true">
<igx-icon fontSet="material" name="menu"></igx-icon>
</span>
<section>
<div>
<router-outlet></router-outlet>
</div>
</section>
</main>
</div>

Listing 7.

Also add the additional components in app.module.ts page which are shown as highlighted in Listing 8.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {
IgxButtonModule,
IgxIconModule,
IgxNavigationDrawerModule,
IgxRippleModule,
IgxToggleModule } from 'igniteui-angular/main';
import { AppComponent } from './app.component';
import { RouterModule, Routes } from '@angular/router';
import { EditProfileComponent } from './edit-profile/edit-profile.component';
import { ViewProfileComponent } from './view-profile/view-profile.component';
import { NotFoundComponent } from './not-found/not-found.component';
const appRoutes: Routes = [
{ path: 'not-found', component: NotFoundComponent },
{ path: 'edit-profile', component: EditProfileComponent },
{ path: 'view-profile', component: ViewProfileComponent }
];
@NgModule({
declarations: [
AppComponent,
EditProfileComponent,
ViewProfileComponent,
NotFoundComponent
],
imports: [
BrowserModule,
IgxButtonModule,
IgxIconModule,
IgxNavigationDrawerModule,
IgxRippleModule,
IgxToggleModule,
RouterModule.forRoot(
appRoutes
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Listing 8.

One last thing. Add the following CSS in app.component.css.

.content-wrap {
width: 100%;
height: 100%;
display: flex;
}

Listing 9.

Now run the application and run the following command.

ng serve

And open the web application in web browser using http://localhost:4200

Angular
Figure 2.

Angular
Figure 3.

Conclusion

Navigation drawer is a very useful component of Ignite UI to quickly add navigation to your Angular app. In this article, we saw how to add a navigation page and attach navigation links to the control items. The control is responsive and works flawlessly on any device of any size.

Learn more, download a free trial, and get started here,

Get Started with Ignite UI for angular.
Download the code here.
View Demo here