← Back to Articles         
Child Routes and Wildcard Route

Child Routes and Wildcard Route

Published on 30 Sep 2026     7 min read Angular
Routing

1. What Are Child Routes in Angular?

What is it?

Child routes are routes nested inside another route.

They are useful when a feature has a parent page with multiple sub-pages.

For example:

/products
/products/list
/products/add

Here:

products
   │
   ├── list
   └── add

products is the parent route, while list and add are child routes.

Child routes are defined using the:

children: []

property.

Full Simple Sample Program

products.ts

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-products',
  standalone: true,
  imports: [RouterLink, RouterOutlet],
  template: `
    <h2>Products</h2>

    <nav>
      <a routerLink="list">Product List</a> |
      <a routerLink="add">Add Product</a>
    </nav>

    <hr>

    <router-outlet></router-outlet>
  `
})
export class Products {
}

product-list.ts

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    <h3>Product List</h3>

    <ul>
      <li>Laptop</li>
      <li>Mobile</li>
      <li>Keyboard</li>
    </ul>
  `
})
export class ProductList {
}

add-product.ts

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

@Component({
  selector: 'app-add-product',
  standalone: true,
  template: `
    <h3>Add Product</h3>

    <p>Add Product Form</p>
  `
})
export class AddProduct {
}

app.routes.ts

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

import { Products } from './products';
import { ProductList } from './product-list';
import { AddProduct } from './add-product';

export const routes: Routes = [
  {
    path: 'products',
    component: Products,
    children: [
      {
        path: 'list',
        component: ProductList
      },
      {
        path: 'add',
        component: AddProduct
      }
    ]
  }
];

app.ts

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterLink, RouterOutlet],
  template: `
    <h1>My Application</h1>

    <a routerLink="/products">Products</a>

    <hr>

    <router-outlet></router-outlet>
  `
})
export class App {
}

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes)
  ]
};

Explanation

The important configuration is:

{
  path: 'products',
  component: Products,
  children: [
    {
      path: 'list',
      component: ProductList
    },
    {
      path: 'add',
      component: AddProduct
    }
  ]
}

Angular creates this route hierarchy:

products
   │
   ├── list
   │     ↓
   │  ProductList
   │
   └── add
         ↓
      AddProduct

Therefore:

/products/list → ProductList

/products/add  → AddProduct

Important: Parent needs <router-outlet>

The Products component contains:

<router-outlet></router-outlet>

This is where its child components are displayed.

There are effectively two outlets in this example:

App
 │
 └── <router-outlet>
          │
          └── Products
                │
                └── <router-outlet>
                         │
                         ├── ProductList
                         │
                         └── AddProduct

The first outlet displays Products.

The second outlet, inside Products, displays its child route.

2. What is a Wildcard Route?

What is it?

A wildcard route is a special Angular route that matches a URL when no previous route matches.

The wildcard syntax is:

**

Example:

{
  path: '**',
  component: PageNotFound
}

Suppose your application supports:

/home
/products
/contact

but the user enters:

/xyz

There is no /xyz route.

The wildcard route catches it:

/xyz
 ↓
No normal route matches
 ↓
**
 ↓
PageNotFound

Simple Example

export const routes: Routes = [

  {
    path: '',
    component: Home
  },

  {
    path: 'products',
    component: Products
  },

  {
    path: 'contact',
    component: Contact
  },

  {
    path: '**',
    component: PageNotFound
  }

];

Why Must the Wildcard Route Be Last?

Angular evaluates routes in configuration order using first-match wins.

Suppose you incorrectly write:

export const routes: Routes = [

  {
    path: '**',
    component: PageNotFound
  },

  {
    path: 'products',
    component: Products
  }

];

Now the wildcard can match /products before Angular reaches the actual products route.

Therefore, put it last:

export const routes: Routes = [

  {
    path: 'products',
    component: Products
  },

  {
    path: '**',
    component: PageNotFound
  }

];

Think:

Specific routes first
        ↓
Wildcard last

3. How Do You Implement a 404 Page?

A wildcard route is commonly used to implement a Page Not Found / 404-style page in an Angular SPA.

Full Simple Sample

home.ts

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

@Component({
  selector: 'app-home',
  standalone: true,
  template: `
    <h2>Home Page</h2>
  `
})
export class Home {
}

products.ts

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

@Component({
  selector: 'app-products',
  standalone: true,
  template: `
    <h2>Products Page</h2>
  `
})
export class Products {
}

page-not-found.ts

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-page-not-found',
  standalone: true,
  imports: [RouterLink],
  template: `
    <h1>404</h1>

    <h2>Page Not Found</h2>

    <p>
      The page you requested does not exist.
    </p>

    <a routerLink="/">
      Go to Home
    </a>
  `
})
export class PageNotFound {
}

app.routes.ts

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

import { Home } from './home';
import { Products } from './products';
import { PageNotFound } from './page-not-found';

export const routes: Routes = [

  {
    path: '',
    component: Home
  },

  {
    path: 'products',
    component: Products
  },

  {
    path: '**',
    component: PageNotFound
  }

];

app.ts

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterLink,
    RouterOutlet
  ],
  template: `
    <h1>My Application</h1>

    <nav>
      <a routerLink="/">Home</a> |
      <a routerLink="/products">Products</a>
    </nav>

    <hr>

    <router-outlet></router-outlet>
  `
})
export class App {
}

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes)
  ]
};

How Does the 404 Flow Work?

Suppose the user enters:

/products

Angular finds:

{
  path: 'products',
  component: Products
}

Therefore:

/products
    ↓
Products

But suppose the user enters:

/abc

Angular checks:

URL = /abc
    ↓
''             ❌
products       ❌
**             ✅
    ↓
PageNotFound

The user sees:

404

Page Not Found

The page you requested does not exist.

Go to Home

Child Route + Wildcard Route Example

A child route can also have its own wildcard handling.

For example:

{
  path: 'products',
  component: Products,

  children: [

    {
      path: 'list',
      component: ProductList
    },

    {
      path: 'add',
      component: AddProduct
    },

    {
      path: '**',
      component: ProductPageNotFound
    }

  ]
}

Now:

/products/list
       ↓
ProductList


/products/add
       ↓
AddProduct


/products/xyz
       ↓
ProductPageNotFound

This wildcard belongs to the products child routing context.

Important: children vs forChild()

Do not confuse these two.

children

Defines nested routes:

{
  path: 'products',
  component: Products,
  children: [
    {
      path: 'list',
      component: ProductList
    }
  ]
}

RouterModule.forChild()

Used in NgModule-based Angular applications to register routes from a feature module:

RouterModule.forChild(routes)

Therefore:

children
   ↓
Nested route relationship


RouterModule.forChild()
   ↓
Feature NgModule route registration

They are different concepts.

Key Points

Child Routes

  • Child routes are nested under a parent route.
  • Defined using:
children: []
  • Example:
/products/list
/products/add
  • A parent component normally needs its own:
<router-outlet></router-outlet>

to display child components.

Wildcard Route

  • Wildcard syntax:
path: '**'
  • Matches URLs not handled by earlier routes.
  • Commonly used for Page Not Found handling.
  • Normally placed last because route matching uses first-match wins.

404 Page

Create a Page Not Found component:

PageNotFound

and map the wildcard route to it:

{
  path: '**',
  component: PageNotFound
}

Interview Questions and Answers

1. What are child routes in Angular?

Child routes are routes nested under a parent route using the children property.

{
  path: 'products',
  component: Products,
  children: [
    {
      path: 'list',
      component: ProductList
    }
  ]
}

This creates:

/products/list

2. Why does a parent component need <router-outlet>?

The parent component's <router-outlet> provides the location where Angular renders the matched child component.

Products
   ↓
<router-outlet>
   ↓
ProductList

3. What is a wildcard route?

A wildcard route matches URLs that haven't matched any earlier route.

{
  path: '**',
  component: PageNotFound
}

4. Why should the wildcard route be last?

Angular route matching uses first-match wins. Since ** can match otherwise unmatched URLs, placing it too early can prevent later routes from being reached.

5. How do you implement a Page Not Found page?

Create a PageNotFound component and configure a wildcard route:

{
  path: '**',
  component: PageNotFound
}

6. What is the difference between child routes and RouterModule.forChild()?

Child routes use:

children: []

to create a nested route hierarchy.

RouterModule.forChild() is an NgModule-era API used by feature modules to register additional routes:

RouterModule.forChild(routes)

They are not the same concept.

Interview-ready answer

Child routes are nested routes defined using the children property and are commonly used for related sub-pages such as /products/list and /products/add. A wildcard route uses ** to match URLs that do not match any earlier route. To implement a Page Not Found page, create a 404 component and map path: '**' to it, keeping the wildcard route last in the route configuration.

Keep Learning - More From This Category

← Back to Articles