Redirecting Routes in Angular Application

In this article, we discuss Redirecting Routes in Angular Application in detail.At the end of this article, you will understand what exactly Redirecting Routes are and when and how to use Redirecting Routes in Angular Application?

Redirecting Routes in Angular Application
Redirecting Routes in Angular Application

Redirecting Routes in Angular Application

Redirecting Routes in Angular:

When the application start, it navigates to the empty route by default. We can configure the router to redirect to a named route by default. So, a redirect route translates the initial relative URL (”) to the desired default path. For example, if may want to redirect to the Login page or registration page by default when the application start. Then you need to configure the redirectTo as shown below.

Redirecting Routes in Angular Application
Redirecting Routes in Angular Application

This route redirects a URL that fully matches the empty path to the route whose path is ‘/Login’. The empty path in the first route represents the default path for the application. This default route redirects to the route for the /Login URL and therefore will display the Login Component.

A redirect route requires a pathMatch property to tell the router how to match a URL to the path of a route. The router throws an error if you don’t. For the special case of an empty URL we also need to add the pathMatch: ‘full’ property so angular knows it should be matching exactly the empty string and not partially the empty string.

Understanding Redirecting Route in Angular with an Example:

Let us understand the concept Redirecting Route with an example. In order to understand this we are going to create a component called Login Component. So, open terminal and then type ng g c Login and press enter as shown in the below image.

Redirecting Routes in Angular Application
Redirecting Routes in Angular Application

Once you press the enter button, it will create a Folder called login and inside that folder it will creates four files as shown in the below image.

<h2>Angular Routing Example</h2>
<a [routerLink] = "['/studentLink']" >Student</a> <br/>
<a [routerLink] = "['/studentdetailsLink']" >student details</a>
<div>
    <router-outlet></router-outlet>
</div>
Modify app.component.ts file:

Open app.component.ts file and then copy and paste the following code in it.

import { Component} from '@angular/core';
import {Router} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

At this point, if you run the application, then you will get the following output. If you notice the URL it is empty and displaying default page.

Redirecting Routes in Angular Application
Redirecting Routes in Angular Application

Instead of showing the default page when the URL is empty, we want to redirect to the Login page. This is where Redirecting Routes comes into picture in Angular Application.

Modifying the app-routing.module.ts file:

Open app-routing.module.ts file and then copy and paste the following code in it. Here, we did three things. First import the login component. Second create a path for login component and finally create an empty path and set redirectTo property value to the login path.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StudentComponent } from './student/student.component';
import { StudentdetailComponent } from './studentdetail/studentdetail.component';
import { LoginComponent } from './login/login.component';
const routes: Routes = [
  {
    path:'', redirectTo:'Login',pathMatch:'full'
  },
  {
    path:'studentLink', component:StudentComponent
  },
  {
    path:'studentdetailsLink', component: StudentdetailComponent
  },
  {
    path:'Login', component:LoginComponent
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

With the above changes in place, now run the application, go to the default URL i.e. http://localhost:4200 it will automatically redirect to the Login page as shown in the below image.

Redirecting Routes in Angular Application

In the next article, I am going to discuss Wildcard Route in Angular Application. Here, in this article, I try to explain Redirecting Routes in Angular Application. I hope you enjoy this article and understand the need and use of Redirecting Route concept.

Source: Various

Redirecting Routes in Angular, Routes in Angular, Angular, Angular Routes, Navigation in Angular, Redirecting Routes, Angular Routing Examples, Web development, UI Development, Angular Tutorial, Angular Routing Concept

Related Posts

One thought on “Redirecting Routes in Angular Application

Leave a Reply

Your email address will not be published. Required fields are marked *

How to Protect yourself from CovidVaccination saves lives at every stage of life
  • Clean your home regularly, particularly frequently touched surfaces like
  • Stay home stay safe. Follow the Golden Rule. Wash your hands frequently with soap and water or use alchohol based hand-rub.
  • Stay home stay safe. Stay physically fit. Exercise regulary. Eat a nutritious diet. Don’t smoke.
  • Stay home stay safe. If you show symptoms of COVID-19, self isolate yourself, wear a mask around others and seek medical advice