Blog Detail

  • Home
  • Angular Routing

Angular Routing

Single Page Application

Angular is a framework that helps to develop the Single Page Application (SPA). this is main feature of angular framework. In SPA the page will not be reload at every time of navigation from one component to another component. But in normal application the page will be reload at every time of navigation from one page to another page.

In this blog I posted how can we do the routing at top level and child level. router-outlet is a selector for displaying the child components based on URL path. we can have the multiple router-outlet inside the different components. the router-outlet which is present in the app.component.html is the top level

Routing config:

app-routing.module.ts


const routes: Routes = [
  {path:'', pathMatch :'full', redirectTo:"/admin/dashboard"},

  // with Children components
  {path:'admin', component: AdminViewComponent, children: adminRoutes},
  
  // Top level
  {path: 'login', component: LoginComponent},
  {path: '**', component: PageNotFoundComponent},
];


// Admin Children components
const adminRoutes = [
  {path:'', pathMatch :'full', redirectTo:"dashboard"},
  {path:'dashboard', component: DashboardComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html


<a routerLink="login">Login</a>

<router-outlet></router-outlet>

admin-view.component.html

<a routerLink='dashboard' routerLinkActive="active">Dashboard</a>
<router-outlet></router-outlet>

Write a comment