How to return route with a parameter in Angular 7

Question

I have a simple todo-list app in Angular 7 where I've added a button which toggles between "personal" and "work". Here's the function to toggle:

  toggleShowPersonal(){
    if (this.showPersonal){
      this.showPersonal = false; 
    }
    else {
      this.showPersonal = true; 
    }
    this.refreshTodos(); 
  }

Once the list is presented, the user can chose to edit or add the todo item. That will take them to a detail page via this command:

this.router.navigate(['todos',id]);

I'm trying to change the routing command to add the "showPersonal" parameter:

this.router.navigate(['todos',id, this.showPersonal]);

I've updated the routing module to reflect the change:

  { path: 'todos/:id,:showPersonal', component: TodoComponent, canActivate:[RouteGuardService]},  

However, with this change, it no longer goes to the detail page and instead defaults to the login page.

What am I doing wrong?

Answer 1

paths need / between parameters:

path: 'todos/:id/:showPersonal'