Angular

Angular Child Routes Example

Welcome readers, in this tutorial, we will learn the basic concept behind Routing and Child Routes in angular.

1. Introduction

Routing in angular is an essential part of the angular framework contained in the @angular/router package. It,

  • Helps developers build single page applications with multiple states and views using routes and components
  • Allows client-side navigation and routing between various components
  • Allows lazy loading of modules
  • Add router guards for client-side protection and allow or disallow access to the components or modules
  • Various path matching strategies (i.e. prefix and full) to tell the router how to match a specific path to a component
  • Easy access to route and query parameters

1.1 Routes and Paths in Angular Routing

In angular, a route is an object that provides information about which component maps to a specific path. A path is a fragment of a url that determines where exactly the resource is located the user wants to access. In angular, developers can define a route using route configurations or instance of the Router interface. Each route has the following properties i.e.

  • path: Specifies the path of the route
  • pathMatch: Specifies the matching strategy (i.e. prefix or full)
  • component: Specifies the component that is mapped to a route
  • redirectTo: Url which users will be redirected to if a route is a matched

For instance,

{ path: 'products', component: ProductlistComponent }

1.2 Router Outlet

The router-outlet tag in angular is a directive exported by the RouterModule and acts as a placeholder to the router where it needs to insert the matched components. It is represented by the following syntax.

<router-outlet></router-outlet>

Always remember, an angular router can support more than one outlet in the same application. The main outlet is called as a primary outlet and other outlets are called secondary outlets. Now open the visual studio code and let us see how to implement this tutorial in angular 6 frameworks.

2. Angular Child Routes Example

Here is a systematic guide for implementing this tutorial.

2.1 Tools Used

We are using Visual Studio Code and Node Terminal to compile and execute the angular code on a browser.

2.2 Project Structure

In case you are confused about where you should create the corresponding files or folder, let us review the project structure of the angular application.

Angular Child Routes - Application Structure
Fig. 1: Application Structure

3. Creating Angular application

Run the ng new angular-routing-child-routes-example command in the npm console to create a new angular project. Once the new project is created, following the below steps.

3.1 Import Reactive forms module

To start working with angular routing will need to import the RoutingModule module in src/app/app.module.ts file.

app.module.ts

// Injecting the routing module.
import { RoutingModule } from './routing/routing.module';

// Declaring the routing module in the imports section of NgModule decorator.
imports: [
    BrowserModule, RoutingModule
  ],

3.2 Injecting Router Outlet in the Application module

To activate routing in the angular application, inject the routing outlet in src/app/app.component.html file.

app.component.html

<div class="container">
  <h2 align="center" class="text-info">{{ title }}</h2>
  <hr />

  <!-- To activate the routing in the angular application. -->
  <router-outlet></router-outlet>
</div>

3.3 Creating Components

To understand child routing in angular we will create some components. Execute the following commands in the npm console.

// Administrator component.
ng generate component component/admin

// Child components of Administrator module.
ng generate component component/admin-activity
ng generate component component/admin-list

// User component.
ng generate component component/user

Following commands will generate the sample components to better understand the child routing in angular. If developers have any confusion regarding the project structure, they can refer to Fig. 1. Do remember to include the router-outlet in the src/app/component/admin/admin.component.html file to include the children components of the administrator component.

3.4 Creating a Routing module

Run the ng g m routing command in the npm console to create a routing module. Add the following code to the src/app/routing/routing.module.ts file.

routing.module.ts

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

// Administrator component.
import { AdminComponent } from '../component/admin/admin.component';
// Child components of Administrator module.
import { AdminListComponent } from '../component/admin-list/admin-list.component';
import { AdminActivityComponent } from '../component/admin-activity/admin-activity.component';
// User component.
import { UserComponent } from '../component/user/user.component';

// Configuring the routing paths.
const routes: Routes = [
  { path: '', redirectTo: '/user', pathMatch: 'full' },
  { path: 'user', component: UserComponent },
  {
    path: 'admin', component: AdminComponent, children: [
      { path: 'list', component: AdminListComponent },
      { path: 'activity', component: AdminActivityComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  declarations: []
})

export class RoutingModule { }

4. Run the Application

As we are ready with all the changes, let us compile and run the angular application with ng serve command. Once the projects are successfully compiled and deployed, open the browser to test it.

5. Project Demo

Open your favorite browser and hit the angular application url (http://localhost:4200/) to display the index page of the application.

Angular Child Routes - User Interface
Fig. 2: User Interface

Change the browser url to http://localhost:4200/admin to display the administrator interface.

Angular Child Routes - Administrator Interface
Fig. 3: Administrator Interface

Developers can click the link present in the admin interface to display the child components within the administrator interface.

Angular Child Routes - Child components
Fig. 4: Child components of Administrator Interface

That is all for this tutorial and I hope the article served you whatever you were expecting for. Happy Learning and do not forget to share!

6. Conclusion

In this section, we learned how to create a simple angular routing application and understand the child routing in angular. Developers can download the sample application as an Eclipse project in the Downloads section.

7. Download the Eclipse Project

This was a tutorial of Child Routing in the angular framework.

Download
You can download the full source code of this example here: Angular Child Routes Example

Yatin Batra

An experience full-stack engineer well versed with Core Java, Spring/Springboot, MVC, Security, AOP, Frontend (Angular & React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button