Over a million developers have joined DZone.

.NET Core 2.0 With Angular 4 and MySQL, Part 8: Angular Routing

DZone's Guide to

.NET Core 2.0 With Angular 4 and MySQL, Part 8: Angular Routing

In this post, we continue work on our web application by adding routing functionalities to it. Read on to get starting using Angular!

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

One of every web application's main features is navigation, and to enable it in our project, we need to use routing. The Angular Router enables navigation from one view to the next as users perform application tasks.

In our navigation menu, we are going to have three menu options: one for the home screen, another one for the owner operations, and the last one for the account operations. Hopefully, this will help you realize the advantages of using multiple modules inside a project and how the lazy content loading helps your application perform better.

If you want to see all the basic instructions and complete navigation for this series, check out the following link: Introduction page for this tutorial.

For the previous part check out: Part 7 - Creating Angular4 client side - Preparing the project and creating the first component

The source code is available at GitHub .NET Core, Angular 4 and MySQL. Part 8 - Source Code

Creating a Navigation Menu

In the app folder, create a new folder and name it "menu." After that create these files:

  • menu.component.ts
  • menu.component.html
  • and menu.component.css

Then, import the menu component inside the app.module.ts file.

We are going to use Bootstrap classes to implement the navigation menu within the menu.component.html file:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Account-Owner Home</a>
    <ul class="nav navbar-nav">
      <li><a href="#">Owner Actions</a></li>
      <li><a href="#">Account Actions</a></li>

This is how the menu.component.ts file should look:

import { Component, OnInit } from '@angular/core';

  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
export class MenuComponent implements OnInit {

  constructor() { }

  ngOnInit() {

And we are going to change our app.component.html file:

<div class="container container-fluid">
    <div class="row">

Start your Angular project by typing ng serve and navigate to the http://localhost:4200. You should be able to see our menu on the screen:

Configuring Angular Routing

The page with the welcome message is not available anymore because we have changed the app.component.html file. To enable the navigation between all the pages inside this project, we need to configure the routing.

Open the app.module.ts file and modify it:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { MenuComponent } from './menu/menu.component';

  declarations: [
  imports: [
      { path: 'home', component: HomeComponent },
      { path: '', redirectTo: '/home', pathMatch: 'full' }
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

In this file, we may notice a MenuComponent inside the declarations array. It was imported earlier during the creation of the navigation component. Also, check out the RouterModule, which is the module for the Angular routing. We are going to use RouterModule.forRoot to define routes for our application.

When we create more than one module inside the application, we can use the forRoot() function provided by the RouterModule, only in the main(root) module. In this project, it is the app.module file. In all other modules, we must use the forChildren() function. The forRoot() function accepts an array of objects as a parameter. Every element of that array consists of the path and the target component for that path. So, the path: 'home' means that on the address http://localhost:4200/home we are going to serve the HomeComponent. The other line inside the forRoot function is the default redirection to the home page.

To show the home page, modify app.component.html:

<div class="container container-fluid">
    <div class="row">
    <div class="row">

The router-outlet is a container for the routing content. So basically, all the content that exists on the address you are routing to is going to be presented inside that container.

Now if you navigate to localhost:4200 you should be able to see the following result:

Styling Links

If you want to style your active link in the menu, change your <a> tag:

<a class="navbar-brand" [routerLink]="['/home']" routerLinkActive="active" 
                [routerLinkActiveOptions]="{exact: true}">Account-Owner Home</a>

With the routerLinkActive, we are setting up the CSS class name we want to use to style the active link. Furthermore, the routerLinkActiveOptions is going to allow us to add a class only if there is an exact match of the link and the URL.

Now in the menu.component.css file add the .active class styles:

    font-weight: bold;
    font-style: italic;
    color: #fff;

Creating the Not-Found Component


Now we have the working navigation.

To complete the routing part of this post, we are going to create a component with the name "not-found." The application is going to redirect a user to this component when he types a none existing route in the URL.

Let's start by creating the new folder inside the app folder and name it error-pages. Inside the error-pages folder, we are going to create a folder and name it not-found. Inside that folder create all the component files you need.

Be sure not to forget to import this component into our app.module.ts file.

This is the folder structure:

We can also create this folder structure automatically by typing this command: ng g component error-pages/not-found

Let's modify the not-found.component.ts file:

import { Component, OnInit } from '@angular/core';

  selector: 'app-not-found',
  templateUrl: './not-found.component.html',
  styleUrls: ['./not-found.component.css']
export class NotFoundComponent implements OnInit {

  public notFoundText: string = `404 SORRY COULDN'T FIND IT!!!`

  constructor() { }

  ngOnInit() {

Pay attention to the string value of the variable "notFoundText." We are not using apostrophes but backticks (`). All the content inside the backticks will be considered as a string, even the apostrophe sign in the string.

Modify the not-found.component.html file:


Modify the not-found.component.css file:

    font-weight: bold;
    font-size: 50px;
    text-align: center;
    color: #f10b0b;

Finally, modify the forRoot function in the app.module.ts file:

imports: [
      { path: 'home', component: HomeComponent },
      { path: '404', component : NotFoundComponent},
      { path: '', redirectTo: '/home', pathMatch: 'full' },
      { path: '**', redirectTo: '/404', pathMatch: 'full'}

You may notice two changes. With the first change, we are declaring the path 404 and assigning the component NotFoundComponent to that path. Now our component is going to be visible on localhost:4200/404. The second change means that whenever you search for any route that doesn't match any of our defined routes, the application redirects you to the 404 page.

Note that the best practice for large projects is to keep the router array in a separate file, but for the sake of the simplicity of this example, we are keeping it inside the forRoot function.

Typing localhost:4200/whatever should return the following result:


As you might have noticed, creating the menu and using the routing in an Angular project is pretty straightforward. Although we are not creating a large project, it is quite big enough to demonstrate the usage, configuration, and routing of all the pages we currently have. Of course, we are going to create routes for all new pages that we introduce to our project.

By reading this post you've learned:

  • How to create a navigation menu.
  • How to create and configure the routing.
  • The way to style the route links.

Thank you for reading the post, hopefully, it was helpful to you.

In the next part of the series, I am going to show you how to fetch the data and consume the API with the HTTP and Observables.

For any suggestions or questions, don't hesitate to leave the comment in the comment section below.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

web dev ,angular ,web application development ,routing

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}