Angular 18’s New Feature: redirectTo New Power 🔥
How to Redirect Efficiently in Angular?
Hi there 👋
Today’s story will take you into the world of Angular routes. If you’re familiar with Angular routes and you’re here because: “I just want to quickly know what’s new about redirectTo
in Angular 18!" skip the story and go straight to the new feature ⏬. Otherwise, let’s begin our story!
As mentioned, today’s story will take you into the world of Angular routes. Routes are like rooms in your application that you open whenever you navigate to a route by its path (e.g., /room-name
). It looks like this:
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
...
];
In this world, there is a common use case where you want to redirect the user to another room. For example, if you open your home door and want to redirect your guest to the guest’s room, this is widely done in many applications. To achieve this, we use redirectTo
:
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },// redirect to guest's room (Home)
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
...
];