How to automatically route to a child route in Angular

user_8836786 0
Viewed 61

I have an albums module that's loaded by the main app-router module. When clicking the albums link in the navigation, it directs to the albums module which loads an empty path and some child routes. The reason for this is the component assigned to the empty path has it's own navigation and router outlet. This component is the AlbumContainer.

The module has some child routes too. However, when I click on albums in the main navigation, I want it to automatically route to one of the children components / routes (dates). I know it's possible to just add the child route url to the main album navigation anchor, but then that prevents the main navigations routerLinkActive from functioning.

Is it possible that when I land on this module / component, that it automatically routes to the dates path?

In all other instances (in the albums sub menu), I'll be linking directly to the child route via the sub menu.

const routes: Routes = [
  {
    path: '',
    component: AlbumContainer,
    children: [
      {
        path: 'dates',
        loadChildren: () => import('./dates/dates.module').then((mod) => DatesModule)
      },
      {
        path: 'artists',
        loadChildren: () => import('./art/profile.module').then((mod) => mod.ArtistsModule)
      },
    ]
  },
];

HTML for reference

<div>

  <!-- Sub Menu -->
  <div>
     <albums-menu></albums-menu>
  </div>

  <!-- Router Content -->
  <div>
    <router-outlet></router-outlet>
  </div>

</div>
angular-routing angular
1 Answers

Redirect route to child routes

The angular router will try to match the route as a Tree, this means you can use redirectTo relative to the current position in the UrlTree by implementing it as a member of a set of child routes.

Setup

child route container

@Component({
  selector: 'app-outlet',
  template: `<router-outlet></router-outlet>`,
})
export class OutletComponent {}

app.component.html

<router-outlet></router-outlet>

child.component

Simple dummy component that just joins the URL of the current path and shows it in its template:

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

@Component({
  selector: 'app-child',
  template: `{{routeInfo}}`,
})
export class ChildComponent {
  routeInfo: string = '';
  constructor(private r: ActivatedRoute) {
    r.url.subscribe((url) => {
      this.routeInfo = url.join(" ");
    });
  }
}

Routes

const routes: Routes = [
  {
    path: '',
    component: OutletComponent,
    children: [{
      path: '',
      redirectTo: 'childB',
      pathMatch: 'full'
    },
    {
      path: 'childB',
      component: ChildComponent
    },
    {
      path: 'childA',
      component: ChildComponent
    }]
  }
];

Angular will begin matching from the root of the UrlTree. In this instance, if we're at the root, it will check the children.

The trick here, is that inside the child routes, we've also defined an empty route with a redirect, but because it is a child route, it will check if the route is empty, relative to its parent route, if pathMatch is set to full

So, in this example, we will automatically be redirected to /childB if we do not currently have any route selected.

Stackblitz: https://stackblitz.com/edit/angular-ivy-ygiwtn?file=src/app/app.module.ts

user_77127550
Related