How to hide routing parent in angular?

Question

Angular

Good day everyone. I have a routing scheme:

const routes: Routes = [
  { path: '', component: RegularComponent },
  { path: 'crm', component: LoginComponent ,
  children: [
    { path: 'newlead', component: NewLeadComponent, canActivate: [AuthGuard] },
    { path: 'leadlist', component: LeadListComponent, canActivate: [AuthGuard],
      children: [
        { path: ':id', component: LeadPageComponent, canActivate: [AuthGuard] },
      ]
    },
  ]},
];

Where there are child elements, in the LoginComponent component I insert a tag in order to display the child element. Everything works fine, except that when going to a child element, both parent and child elements are displayed. How can I make the parent element hidden? <router-outlet></router-outlet>

Answer 1

Subscribe to activatedRouter, check it out and set the hide flag. Well, the content in the parent under ngIf.
But if such a need arose, most likely you are doing something architecturally wrong.