Four simple steps to work with Ignite UI for Angular Navigation Drawer and Angular Routing

Dhananjay Kumar / Tuesday, April 3, 2018

Ignite UI for Angular is a material-based library to speed up the development process of Angular web apps. There are more than 30 components available in Ignite UI for Angular, which help you to write high performance application faster. You can learn more about Ignite UI for Angular here

In this article, we will follow a step-by-step approach to work with Ignite UI Navigation Drawer and Angular Routings. The Ignite UI for Angular Navigation Drawer component is a side navigation container. It can rest on content and slide in/out of view or be pinned to expand/collapse within the content.

Learn official documentation of Ignite UI Navigation Drawer here

This article will help you in adding Ignite UI for Angular Navigation Drawer in your existing project. However, if you are starting with a new project, you do not have to follow all these steps and using Ignite UI CLI, you can achieve all this in 3 simple commands. Before we go into step by step explanation, let us see how we can work with Ignite UI Navigation Drawer and Angular Routing using Ignite UI CLI.

Using Ignite UI CLI

To use Ignite UI CLI, install Ignite UI CLI and run the command ig on the command prompt. After that Ignite UI CLI will ask you options such as:

Name of the project
Framework : choose Angular
Type of project: choose Ignite UI for Angular to work with native Ignite UI for Angular components. Another option is Ignite UI for Angular wrappers which is a jQuery based library.

Refer the image below:

After the project is created, let us add an Angular component to the project. To add use the arrow key. There are three type options for the component, choose any. In last select option Complete and Run using the arrow key. After this step, Ignite UI will install dependencies using the npm. Once all dependencies are installed, change directory and run command ng serve to run the application created using Ignite UI CLI. You should get an application running as shown in the image below:

This application has following components

Ignite UI for Angular navigation drawer
Ignite UI for Angular Carousel.

So creating an application like above is as easy as this using Ignite UI CLI. If you are working with existing project and wish to add Ignite UI for Angular navigation drawer read further.

Using Ignite UI for Angular Navigation drawer in an existing project

To conclude this article, we will have an application using Angular Routing and Ignite UI for Angular Navigation Drawer as shown in the image below,

Step 1: Project Setup

Let us create an Angular project using Angular CLI. In the application, add few Components to navigate. We have added three components for routing. They are as follows:

Home Component
About Component
Product Component

Additionally, there is a file called app-routing.module.ts file in the project for routing module.

I have kept these components very simple. They all have one property title and that is displayed in the template. For your reference, components are as follows:

product.component.ts

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-product',
    templateUrl: './products/product.component.html'
})
export class ProductComponent {
    title = 'Product View';
}

product.component.html

<h1 class='text-center'>{{title}}</h1>

Other components are the same as ProductComponent.

Step 2: Create Routes

In this step, we will create routing to navigate from one component to other component in our application. It is a simple Angular route with path, component, and data properties set to some values.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { ProductComponent } from './products/product.component';
import { HomeComponent } from './home/home.component';
 
export const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent, data: { text: 'Home ' } },
    { path: 'banking', component: ProductComponent, data: { text: 'Products Details' } },
    { path: 'about', component: AboutComponent, data: { text: 'About' } }
 
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

I would like to draw your attention to data text property of the route. We will use this as the value of the navigation links in Ignite UI for Angular drawer.

Step 3: Importing Routes and Components

We have created routes and components. In this step, add those in main application module. For that import route module and components. Pass routes module as one of the value of imports array and components as one of the values of declaration array.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
 
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ProductComponent } from './products/product.component';
import { HomeComponent } from './home/home.component';
 
@NgModule({
    declarations: [
        AppComponent, AboutComponent, ProductComponent, HomeComponent
    ],
    imports: [
        BrowserModule, AppRoutingModule, BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

I have also imported BrowserAnimationModule. You need it to work with Ignite UI for Angular components and directives.

Step 3: Add Ignite UI for Angular to project

Let us start with adding Ignite UI for Angular library in the project. We can use npm to do this. So run the command shown below to install Ignite UI for Angular

npm install igniteui-angular

After installing Ignite UI for Angular, we need to install hammerjs. To install hammerjs run command as below:

npm install hammerjs

After installing Ignite UI for Angular, let’s make sure that the project references the Ignite UI for Angular styles and the hammerjs library in the angular-cli.json. Modify angular-cli.json as shown below:

angular-cli.json

"prefix": "app",
    "styles": [
        "styles.css",
        "../node_modules/igniteui-angular/styles/igniteui-angular.css"
    ],
        "scripts": ["../node_modules/hammerjs/hammer.min.js"],
            "environmentSource": "environments/environment.ts",

Ignite UI for Angular styles uses the Material Icons. Let us import those in the styles.css as shown below:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

After that import hammerjs in main.ts as shown below:

import 'hammerjs';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

Step 4: Configure Ignite UI Navigation Drawer

In this step, we will configure Ignite UI Navigation Drawer to use Angular Routes we created in step 2. Let us start with importing following in the AppComponent.

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
import 'rxjs/add/operator/filter';
import { routes } from './app-routing.module';
import { IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer';

We have imported NavigationStart and Router from router module to iterate through the routes and push navigation link. In addition, we have imported ViewChild such that we can read IgxNavigationDrawerComponent as ViewChild and call its’ events, methods, and properties in the component class.

Let us create two properties in AppComponent class,

A property to hold navigation links
A ViewChild property for Ignite UI navigation drawer

You can create these two properties as listed below:

public topNavLinks: Array < {
    path: string,
    name: string
} > = [];
@ViewChild(IgxNavigationDrawerComponent) public navdrawer: IgxNavigationDrawerComponent;

Next, in the constructor, we need to create navigation links from routes. That can be done as shown in the listing below:

constructor(private router: Router) {
    for (const route of routes) {
        if (route.path && route.data && route.path.indexOf('*') === -1) {
            this.topNavLinks.push({
                name: route.data.text,
                path: '/' + route.path
            });
        }
    }
}

We also need to make sure that drawer is closed when viewing on the mobile. This can be done in ngOnInit() life cycle hook as shown in the listing below :

ngOnInit() {
    this.router.events
        .filter((x) => x instanceof NavigationStart)
        .subscribe((event: NavigationStart) => {
            if (event.url !== '/' && !this.navdrawer.pin) {
                // Close drawer when selecting a view on mobile (unpinned)
                this.navdrawer.close();
            }
        });

Putting everything together, AppComponent class with Ignite UI navigation drawer configuration will look like below:

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
import 'rxjs/add/operator/filter';
import { routes } from './app-routing.module';
import { IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    public topNavLinks: Array<{
        path: string,
        name: string,
        icon: string
    }> = [];
    @ViewChild(IgxNavigationDrawerComponent) public navdrawer: IgxNavigationDrawerComponent;
 
    constructor(private router: Router) {
        for (const route of routes) {
            if (route.path && route.data && route.path.indexOf('*') === -1) {
                this.topNavLinks.push({
                    name: route.data.text,
                    path: '/' + route.path,
                    icon: route.data.icon
                });
            }
        }
    }
 
    public ngOnInit(): void {
        this.router.events
            .filter((x) => x instanceof NavigationStart)
            .subscribe((event: NavigationStart) => {
                if (event.url !== '/' && !this.navdrawer.pin) {
                    // Close drawer when selecting a view on mobile (unpinned)
                    this.navdrawer.close();
                }
            });
    }
}

Step 5: Configure Ignite UI Navigation Drawer

Next, in the template of AppComponent, we will use ig-nav-drawer and set various properties such as

Header
igxFlex
navbar
content area which would be router-outlet

We are using various directives such as igxLayout, igxDrawerItem, igxRipple to create the drawer. Besides directives, we are using components such as igx-nav-drawer and igx-navbar. You can read more about them on official documentation here.

Putting everything together, the AppComponent template will look like the below listing:

app.component.html

<div class="main" igxLayout>
    <igx-nav-drawer #nav id="project-menu" isOpen="false" [enableGestures]='true' width="280px">
        <ng-template igxDrawer>
            <header igxDrawerItem isHeader="true">Views</header>
            <span *ngFor="let route of topNavLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{route.path}}">
                {{route.name}}
            </span>
        </ng-template>
    </igx-nav-drawer>
    <div igxFlex>
        <igx-navbar title="IgniteUI for Angular Grid Sampler" actionButtonIcon="menu" (onAction)="nav.toggle()" igxFlex>
        </igx-navbar>
        <div class="content" igxLayout igxLayoutJustify="center">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

You can see that we are iterating routes and then adding the router link and router name to the drawer.

Step 6: Run application

On running the application, you will see Ignite UI for Angular navigation drawer in action working with Angular Routing as shown in the image below:

You can navigate between components by clicking on header items in the drawer.

Conclusion

In this post, we learned about using Ignite UI for Angular Navigation drawer in existing Angular project. We also saw how easy it is to create applications using use Ignite UI CLI. If you like this post, please share it. In addition, if you haven’t checked out Infragistics Ignite UI for Angular Components, be sure to do so! They’ve got 30+ material based Angular components to help you code speedy web apps faster