Video Course

Routing Angular v2+ Applications: Lesson 18 of 23

Dashboard Section

Up Next

Dashboard Users Section

Autoplaying in 7 seconds!

Cancel

We'll get some more Angular 2 practice in by creating a whole new section of our app. We'll be making a dashboard section which requires:

  • dashboard.module.ts
  • dashboard.routing.ts
  • dashboard.component.ts

dashboard.component.ts

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

@Component({
  template: `
    i am the dashboard section
  `
})
export class DashboardComponent {}

dashboard.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
import { dashboardRouting } from './dashboard.routing';
import { DashboardUsersComponent } from './users/dashboard-users.component';
import { DashboardUsersHomeComponent } from './users/dashboard-users-home.component';
import { DashboardUserDetailsComponent } from './users/dashboard-user-details.component';

@NgModule({
  imports: [
    CommonModule,
    dashboardRouting
  ],
  declarations: [
    DashboardComponent,
    DashboardUsersComponent,
    DashboardUsersHomeComponent,
    DashboardUserDetailsComponent
  ],
  providers: [
  ]
})
export class DashboardModule {}

dashboard.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { DashboardUsersComponent } from './users/dashboard-users.component';
import { DashboardUsersHomeComponent } from './users/dashboard-users-home.component';
import { DashboardUserDetailsComponent } from './users/dashboard-user-details.component';

export const dashboardRoutes: Routes = [
  {
    path: 'dashboard',
    children: [
      {
        path: '',
        component: DashboardComponent
      },
      {
        path: 'users',
        component: DashboardUsersComponent,
        children: [
          {
            path: '',
            component: DashboardUsersHomeComponent
          },
          {
            path: ':username',
            component: DashboardUserDetailsComponent
          }
        ]
      }
    ]
  }
];

export const dashboardRouting: ModuleWithProviders = RouterModule.forChild(dashboardRoutes);

Chris Sevilleja

162 posts

Co-founder of Scotch.io. Slapping the keyboard until something good happens.