Router with parameter in Angular2

app-routing.module.ts Now updated to Angular4

 
import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from '../dashboard/home/home.component';
import { DashboardComponent } from '../dashboard/dashboard.component';
import { TemplatedrivenformComponent } from '../dashboard/templatedrivenform/templatedrivenform.component';
import { TooltipComponent } from '../dashboard/tooltip/tooltip.component';
import { ModeldrivenformComponent } from '../dashboard/modeldrivenform/modeldrivenform.component';
import { ModeldrivenformbuilderComponent } from '../dashboard/modeldrivenformbuilder/modeldrivenformbuilder.component';
import { EmploymentlistComponent } from '../dashboard/employmentlist/employmentlist.component';
import { EmploymentdetailsComponent } from '../dashboard/employmentdetails/employmentdetails.component';
import { PagenotfoundComponent } from '../dashboard/pagenotfound/pagenotfound.component';
import { EmployeefulldetailsComponent } from '../dashboard/employeefulldetails/employeefulldetails.component';
import { EmployecategoryComponent } from '../dashboard/employecategory/employecategory.component';
import { EmployeemaleComponent } from '../dashboard/employeemale/employeemale.component';
import { EmployeefemaleComponent } from '../dashboard/employeefemale/employeefemale.component';
import { StudentComponent } from '../dashboard/student/student.component';
import { FilterdataPipe } from '../shared/pipes/sharedata/filterdata.pipe';
import { TransclusionComponent } from '../dashboard/transclusion/transclusion.component';
import { ShowhideComponent } from '../dashboard/showhide/showhide.component';

const routes: Routes = [
  { path: '', redirectTo: 'Dashboard', pathMatch: 'full' },
  { path: 'TemplateDrivenForm',  component: TemplatedrivenformComponent },
  { path: 'Dashboard',     component: DashboardComponent },

  { path: 'Transclusion',     component: TransclusionComponent },
   { path: 'Student',     component: StudentComponent },
    { path: 'Showhide',     component: ShowhideComponent },
  { path: 'ModelDrivenForm',     component: ModeldrivenformComponent },
  { path: 'ModelDrivenFormBuilder',     component: ModeldrivenformbuilderComponent },
  { path: 'EmploymentList',     component: EmploymentlistComponent },
  { path: 'EmploymentDetails',     component: EmploymentdetailsComponent },
// angular 4 with parameter
  { path: 'EmployeefulldetailsComponent/:id', component: EmployeefulldetailsComponent },
    { path: 'Employecategory',     component: EmployecategoryComponent,
      children:[
           { path: '', redirectTo: 'EmployeeMale', pathMatch: 'full' },
          { path: 'EmployeeMale',component: EmployeemaleComponent },
          { path: 'EmployeeFeMale',component: EmployeefemaleComponent },
         
      ]
 },
   { path: '**',component: PagenotfoundComponent },

  
 

];


@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}
export const routingComponent =[HomeComponent,ShowhideComponent,FilterdataPipe,TransclusionComponent,StudentComponent,TemplatedrivenformComponent,TemplatedrivenformComponent,
TooltipComponent,EmploymentdetailsComponent,EmployeefemaleComponent,EmployeemaleComponent,EmployecategoryComponent,EmployeefulldetailsComponent,ModeldrivenformComponent,PagenotfoundComponent,EmploymentlistComponent,ModeldrivenformbuilderComponent,DashboardComponent
]

Working demo of Router with parameter Demo Link

Leave a Reply

Your email address will not be published. Required fields are marked *