Setup Main Routes & Child Routes

When application needs to have deep linking within Tabbed navigation Child Routes are the best options in Angular.

In below youtube video, I have covered this blog already so incase you do not want to read through you can watch it as well:

---

Setup Project

In this blog, I will explain how to setup routes & nested/ child routes. I will use angular-cli to setup the project. Open up the Terminal and write command:

ng new ng-child-routes

// ng - global command to fire angular-cli
// new - to initiate new project
// ng-child-routes - project name whichever you would like

As soon you hit enter, it will ask you – if you wanted to set up Routes or not? Input y/yes and proceed.

Now open app.component.html file, you will see that it included <router-outlet></router-outlet> tag automatically. This tag will ensure that when we navigate through the App it will change view.

Generate Component

Now to add a Main navigation to the App, we will create a new component for navigation and will include links to the Home, About Us, Services & Projects pages. To create this component go to the terminal:

ng generate component navigation
    // OR
ng g c navigation

// generate / g - it will generate new components, directives etc...
// component / c - key to generate new component
// navigation - name of the new component

Make sure to use [routerLink] in stead of href attribute in the top-nav links. For example: Home link will look like:

<a class="nav-link" [routerLink]="['/']">Home <span class="sr-only">(current)</span></a>

As the navigation will be global in the App, let’s add it in the app.component.html file above <router-outlet /> tag. So it will show on each routes.

Main Routes

Now to add routing in the App, go to app-routing.module.ts file and update const routes with below code.

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'aboutus', component: AboutusComponent }
  { path: 'services', component: ServicesComponent },
  { path: 'projects', component: ProjectsComponent }
];

// path - The path to match against. You can add wild card ('**') to match any path
// redirectTo - A URL to which to redirect when a the path matches. Absolute if the URL begins with a slash (/), otherwise relative to the path URL. When not present, router does not redirect
// pathMatch - The path-matching strategy, one of 'prefix' or 'full'. Default is 'prefix'
// components - The component to instantiate when the path matches. Can be empty if child routes specify components

Nested/Child Routes

Now to add child routes for About Us section, we will need to add one more property – children to the objects in routes. Children property will accept an array of object same as parent.

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'aboutus', component: AboutusComponent,
    children: [
      { path: 'overview', component: OverviewComponent },
      { path: 'contact', component: ContactComponent },
    ]
  },
  { path: 'services', component: ServicesComponent },
  { path: 'projects', component: ProjectsComponent },
];

Whenever you add new routes, make sure to import that component in the app-routing.modules.ts file on top of the file.

import { HomeComponent } from './components/home/home.component';
import { ServicesComponent } from './components/services/services.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { AboutusComponent } from './components/aboutus/aboutus.component';
import { ContactComponent } from './components/aboutus/contact/contact.component';
import { OverviewComponent } from './components/aboutus/overview/overview.component';

Now to make sure that child routes works fine under About Us section, we need to add <router-outlet></router-outlet> tag at the bottom of the aboutus.component.html file.

So this is how we can set up main & nested/child routes on the Angular App.