Routing Angular 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:

Table of Contents

    • 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

    176 posts

    Founder of Scotch.io. Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.