Hi Dev,
In this article, i will let you know how to redirect to another page in angular 8 application. i will show you how redirect to another route in angular 9 application.
in angular, using redirectTo we can easily redirect to another route. i will give you very simple example so you can easily use it.
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...
Do you like below Tutorials ?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?
- Angular 9 Image Upload with Crop Example
- Files Upload on Button Click in PHP Dropzone Example
- PHP Dropzone Allow only One File to Upload Example
- PHP Dropzone Allow only Images to Upload Example
- PHP Dropzone Delete Uploaded File Example
- Livewire CRUD Laravel 7 Example