I have created a menu, breadcrumbs, with components and their children. The problem is that I see the first child perfectly with but when I open a child of that child (grandchildren so to speak) the component opens under its parent. My goal is to remove the parent’s view and show only the child’s. I leave code for better understanding. The father is casilleros.component and his child is historial.component

<!-- dashboard.component.html -->
<div class="dashboard-container">
    <app-menu></app-menu>
    <div class="content-area">
        <app-navbar></app-navbar>
        <app-breadcrumb></app-breadcrumb>
        <div class="dashboard-content">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

// app-routing.module.ts
const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'navbar', component: NavbarComponent },
  {
    path: 'dashboard', component: DashboardComponent, data: { breadcrumb: 'Dashboard' },
    children: [
      { path: 'permisos', component: PermisosComponent, data: { breadcrumb: 'Permisos' }},
      { path: 'operarios', component: OperariosComponent, data: { breadcrumb: 'Operarios' }},
      { path: 'maquinas', component: MaquinasComponent, data: { breadcrumb: 'Máquinas' }},
      { path: 'materiales', component: MaterialesComponent, data: { breadcrumb: 'Materiales' }},
      { 
        path: 'casilleros', component: CasillerosComponent, data: { breadcrumb: 'Casilleros' },
        children: [
          { path: 'historial', component: HistorialComponent, data: { breadcrumb: 'Historial' }, outlet: 'casilleros' }
        ]
      },
........
```

```
<!-- casilleros.component.html -->
<div class="container mt-4">
    <div class="d-flex justify-content-between mb-3">
        <input type="text" class="form-control w-50" placeholder="Buscar">
    </div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th></th>
                <th>Referencia</th>
                <th>Ubicación</th>
                <th>Activo</th>
                <th>Ocupado</th>
                <th>Acción</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of items; let i = index;">
                <td>{{i}}</td>
                <td>{{ item.referencia }}</td>
                <td>{{ item.ubicacion }}</td>
                <td>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="activo{{ item.referencia }}" checked>
                    </div>
                </td>
                <td>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="ocupado{{ item.referencia }}" checked>
                    </div>
                </td>
                <td>
                    <button (click)="goToHistorial(item)" class="btn btn-sm"><i class="bi bi-search"></i></button>
                    <button class="btn btn-sm"><i class="bi bi-pencil"></i></button>
                    <button class="btn btn-sm"><i class="bi bi-trash"></i></button>
                </td>
            </tr>
        </tbody>
    </table>
    <router-outlet name="casilleros"></router-outlet>
</div>
```

```
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-casilleros',
  templateUrl: './casilleros.component.html',
  styleUrls: ['./casilleros.component.css']
})
export class CasillerosComponent {

  constructor(private router: Router) {}

  items = [
    { referencia: 101, ubicacion: 'Vinilo' },
    { referencia: 102, ubicacion: 'Vinilo' },
    { referencia: 103, ubicacion: 'Vinilo' },
    { referencia: 104, ubicacion: 'Vinilo' },
    { referencia: 105, ubicacion: 'Vinilo' },
    { referencia: 106, ubicacion: 'Vinilo' },
    { referencia: 107, ubicacion: 'Vinilo' },
    { referencia: 108, ubicacion: 'Vinilo' },
    { referencia: 109, ubicacion: 'Vinilo' },
    { referencia: 110, ubicacion: 'Vinilo' }
  ];

  goToHistorial(item: any) {
     this.router.navigate([{ outlets: { casilleros: ['historial'] } }]);
  }
}
```