Angular route and child route management

Question

Somebody can tell me if is possible to open a child route in a new view instead of opening right under it? If so how and how to comeback to the father route previous state of navigation?

Answer 1

Instead of

const routes: Routes = [
   { path: 'first', component: ExampleComponent, children: [
       { path: 'second', component: Example2Compoennt, }
   ] }
];

Do:

const routes: Routes = [
   { path: 'first', component: ExampleComponent },
   { path: 'first/second', component: Example2Compoennt },
];

Answer 2

It's good to use children, because if you want to use some guards it's gonna work for all children routes, it's very useful when you're creating authenticated routes.

Example:

const routes: Routes = [
  {
    path: 'first',
    children: [
      { path: '', component: FirstComponent },
      { path: 'second', component: SecondComponent },
      {
        path: 'third',
        canActivate: [YourGuard],
        children: [
          { path: '', component: ThirdComponent },
          { path: 'another-route', component: FourthComponent },
        ]
      }
    ],
  }
];