ItSolutionStuff.com

How to Redirect to Another Page in Angular?

By Hardik Savani • May 2, 2024
Angular

Today, i am going to write angular tutorial about how to redirect to another route in angular 8 application. i want to give very simple example of redirect to another page in route file. we can easily redirect to another route using redirectTo in angular.

You can simply redirect to page in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 application with this solution.

It's pretty simple to redirect to another route url using redirectTo in angular application. but you maybe don't know so you can simple see bellow app-routing.module.ts file and see how i declare routes and how i redirect that home page to another route.

You can see code of route define:

{

path: '',

redirectTo: 'redirect_route_name',

pathMatch: 'full'

}

you can just see bellow code and you will have solution for your angular app.

app-routing.module.ts

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

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

import { BlogComponent } from './blog/blog.component';

import { PostsComponent } from './posts/posts.component';

const routes: Routes = [

{

path: '',

redirectTo: 'posts',

pathMatch: 'full'

},

{

path: 'posts',

component: PostsComponent

},

{

path: 'blog/:id',

component: BlogComponent

}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

If you run your home page like this way:

http://localhost:4200/

It will redirect to this url:

http://localhost:4200/posts

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Angular Checkbox Change Event Example

Read Now →

How to Add & Get Custom Attribute Value in Angular?

Read Now →

Angular Material Checkbox Example

Read Now →

Angular Radio Button On Change Event Example

Read Now →

Angular Dropdown Change Event Example

Read Now →

How to use Bootstrap Datepicker in Angular?

Read Now →

How to Upload Multiple Images in Angular?

Read Now →

How to Get User Agent in Angular?

Read Now →

How To Get Client IP Address in Angular?

Read Now →

Angular Form Validation no Whitespace Allowed Example

Read Now →

Angular Get Parameters from URL Route Example

Read Now →

How to Get Query String from URL in Angular?

Read Now →

Angular Http Post Request Example

Read Now →

Angular Get Current Route Name Example

Read Now →

How to Get Current URL in Angular?

Read Now →