routerlink or navigate to a module with children and router-outlet

These are my working codes (they are in a module): component.html:

<div class="container-fluid">

<div class="row flex-nowrap">
<div class="col-auto px-0">
<div id="sidebar" class="collapse collapse-horizontal show border-end">
<div class="card" style="max-width: 100%;">
<div class="card-header" [ngClass]="{ 'text-bg-secondary': 0 === 0 }">
<h5>Documents List</h5>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-start"
*ngFor="let t of dataSource() | paginate: {itemsPerPage:10,currentPage}; index as i"
(click)="selectedRow(t, i)" [ngClass]="{ 'text-bg-primary': t === rowSelected }">{{ t.title }}</li>
</ul>
</div>
<div class="card-footer">
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
</div>
</div>
</div>

<main class="col ps-md-2 pt-2">
<a href="#" data-bs-target="#sidebar" data-bs-toggle="collapse" class="border rounded-3 p-1 text-decoration-none"
[attr.aria-expanded]="true"><i class="bi bi-list bi-lg py-2 p-1"></i> Pdf Document</a>
<router-outlet></router-outlet>
</main>
</div>
</div>


in routing.module.ts

const routes: Routes = [
{
path: 'books/:folder',
component: DocViewerComponent,
//children: [{
// path: './:title',
// component: PdfViewerComponent
//}]
},
{
path: 'books/:folder/:title',
component: PdfViewerComponent,

}
];


component.ts

selectedRow(row: any, index: number) {

this.router.navigate(['/doc/books', this.fileFolder, row.title],
{
relativeTo: this.activatedRoute
})
}


It is working because path:'books/:folder' and path:'books/:folder/:title' are different children (when it displays pdf file the list from dataSource is disappeared). My goal is to put the PdfViewerComponent component as a child of the DocViewerComponent component. However, I don't know how to navigate it from the DocViewerComponent component to the child PdfViewerComponent component. I tried put name in the and it still doesn't work. I appriciated for any inputs/ideas. Thank you.

Continue reading...