Design Routes in Angular | Generated by AI

Home PDF

Okay, let’s break down how to design routes in Angular for easy refreshing, sub-routes, and handling query parameters.

1. Easy Refresh and Staying on the Same Page

Angular’s default routing mechanism is designed to handle this seamlessly. When you navigate to a specific route in your Angular application, the browser’s URL changes. This URL represents the current state of your application. When you refresh the page, the browser makes a request to the server for the resource associated with that URL. Angular’s routing module then takes over and renders the component associated with that route.

Key points:

Example AppRoutingModule:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailComponent }, // Route with a parameter
  { path: '**', redirectTo: '' } // Wildcard route for unknown paths
];

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

In this example:

2. Designing Sub-routes (Child Routes)

Sub-routes, or child routes, allow you to create nested layouts within your application. This is useful for sections where you have a parent component that acts as a container for other related components.

Example: Let’s say you have an “Admin” section with “Users” and “Settings” sub-sections.

Steps:

  1. Create Parent and Child Components: 
    ng generate component admin
ng generate component users
ng generate component settings

  2. Configure Child Routes in the Parent’s Routing Module (or the main AppRoutingModule):

    import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { UsersComponent } from './users/users.component';
import { SettingsComponent } from './settings/settings.component';

const adminRoutes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    children: [
      { path: 'users', component: UsersComponent },
      { path: 'settings', component: SettingsComponent },
      { path: '', redirectTo: 'users', pathMatch: 'full' } // Default child route
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(adminRoutes)], // Use forChild for feature modules
  exports: [RouterModule]
})
export class AdminRoutingModule { }

    Alternatively, you can define them in your AppRoutingModule:

    // In AppRoutingModule
const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'admin',
    component: AdminComponent,
    children: [
      { path: 'users', component: UsersComponent },
      { path: 'settings', component: SettingsComponent },
      { path: '', redirectTo: 'users', pathMatch: 'full' }
    ]
  },
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailComponent },
  { path: '**', redirectTo: '' }
];

  3. Add <router-outlet> in the Parent Component’s Template (admin.component.html):

    ```html

    Admin Dashboard

    ```

Explanation:

3. Designing Routes with Query Parameters

Query parameters are used to pass optional information to a route. They appear in the URL after a question mark (?) and are key-value pairs separated by ampersands (&).

Example: A product list page where you can filter by category.

Steps:

  1. Configure the Route (No special configuration needed for query parameters):

    // In AppRoutingModule
const routes: Routes = [
  { path: 'products', component: ProductListComponent },
  // ... other routes
];

  2. Navigate with Query Parameters: You can navigate to the route with query parameters using the Router service:

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

@Component({
  selector: 'app-filter',
  template: `
    <button (click)="filterProducts('electronics')">Electronics</button>
    <button (click)="filterProducts('clothing')">Clothing</button>
  `
})
export class FilterComponent {
  constructor(private router: Router) {}

  filterProducts(category: string) {
    this.router.navigate(['/products'], { queryParams: { category: category } });
  }
}

  3. Access Query Parameters in the Component: Use the ActivatedRoute service to access the query parameters:

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

@Component({
  selector: 'app-product-list',
  template: `
    <h2>Product List</h2>
    <p>Filtering by category: </p>
    <ul>
      <li *ngFor="let product of products">
            
      </li>
    </ul>
  `
})
export class ProductListComponent implements OnInit {
  products: any[] = [
    { id: 1, name: 'Laptop', category: 'electronics' },
    { id: 2, name: 'T-Shirt', category: 'clothing' },
    { id: 3, name: 'Headphones', category: 'electronics' },
    { id: 4, name: 'Jeans', category: 'clothing' }
  ];
  categoryFilter: string | null = null;
  filteredProducts: any[] = [];

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      this.categoryFilter = params['category'];
      this.filterProductsByCategory();
    });
  }

  filterProductsByCategory() {
    if (this.categoryFilter) {
      this.filteredProducts = this.products.filter(
        product => product.category.toLowerCase() === this.categoryFilter?.toLowerCase()
      );
    } else {
      this.filteredProducts = this.products;
    }
  }
}

Explanation:

In summary:

Back 2025.04.01 Donate