Angular Routes or Sub components

Question

I Am creating CRUD for a Journey Entity and have created two components in Angular.

• List
• edit

The list gets all the journeys from a service and displays them. The edit has a form which will add anew journey or edit a journey if it's passed a journey id.

I have a lot of entities and am using routing with url parameters to achieve this:

     <a mat-button [routerLink]="['/journey-edit', journey.id]">{{journey.name}}</a>

I have now discovered Sub components where i can pass a journey from the list to the edit and then just hide the list:

    <app-journey-view *ngIf="currentJourney" [journey]="currentJourney"></app-journey-view>

Now I am stuck. Which way do I proceed?

• Do I need routing at all
• can I mix routing with subcomponents

• Authentication is on my route. Will that work with subcomponents:

   {
   path: 'journey-list',
   component: JourneyListComponent,
   canActivate: [AuthGuardService]
   },
  

This app will have many entities and most entities will be linked through a relational database.

Answer 1

Just use routing. If you hide the list you cannot get to the specific item from url.

{ 
  path: 'journey',
  children:[
    { path: 'journey-list', component: JourneyListComponent},
    { path: ':id', component: JourneyDetailComponent},
    { path: 'edit/:id', component: JourneyEditComponent}
  ]
}