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:p}; 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.
I change my code in routing.ts:
const routes: Routes = [
{
path: 'books/:folder',
component: DocViewerComponent,
children: [{
path: ':folder/:title',
component: PdfViewerComponent
}]
}
];
in my docviewercomponent I have:
selectedRow(row: any) {
this.rowSelected = row;
this.router.navigate(['../', this.fileFolder, row.title],
{
relativeTo: this.activatedRoute
}
)
}
It doesn't work. If I remove ":folder" from path in routing.ts then it works however I need 'folder' data passed to the PdfViewerComponent.
How do I send 'folder' data to the grandchild component (pdfViewerComponent)? Thanks.
this is the code in PdfViewerComponent.ts
ngOnInit(): void {
this.activatedRoute.paramMap
.subscribe(
(params: any) => {
this.folder = params.get('folder');
this.title = params.get('title');
this.pdfFile = this.folder + "/" + this.title;
}
);
}
Thanks.
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:p}; 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.
I change my code in routing.ts:
const routes: Routes = [
{
path: 'books/:folder',
component: DocViewerComponent,
children: [{
path: ':folder/:title',
component: PdfViewerComponent
}]
}
];
in my docviewercomponent I have:
selectedRow(row: any) {
this.rowSelected = row;
this.router.navigate(['../', this.fileFolder, row.title],
{
relativeTo: this.activatedRoute
}
)
}
It doesn't work. If I remove ":folder" from path in routing.ts then it works however I need 'folder' data passed to the PdfViewerComponent.
How do I send 'folder' data to the grandchild component (pdfViewerComponent)? Thanks.
this is the code in PdfViewerComponent.ts
ngOnInit(): void {
this.activatedRoute.paramMap
.subscribe(
(params: any) => {
this.folder = params.get('folder');
this.title = params.get('title');
this.pdfFile = this.folder + "/" + this.title;
}
);
}
Thanks.
Share Improve this question edited Feb 4 at 9:00 D052057 asked Feb 4 at 5:02 D052057D052057 1852 silver badges11 bronze badges2 Answers
Reset to default 1Navigation from DocViewerComponent:
routing:
const routes: Routes = [
{
path: 'books/:folder',
component: DocViewerComponent,
children: [{
path: '/:title',
component: PdfViewerComponent
}]
},
];
The current route is books/:folder, you want to navigate to the child :title, so all you need to do is specify just the title. This is because you have already specified it is a relative navigation relativeTo: this.activatedRoute
selectedRow(row: any, index: number) {
this.router.navigate([row.title], { relativeTo: this.activatedRoute });
}
If you want to navigate along with specifying the this.fileFolder, just take a step back ../ with relative routing and perform the same navigation.
selectedRow(row: any, index: number) {
this.router.navigate(['../', this.fileFolder, row.title], { relativeTo: this.activatedRoute });
}
documentViewer.ts (child level):
Note: I have to use encodeURIComponent() function since I have slashes in the folder string.
selectedRow(row: any) {
this.rowSelected = row;
let folder = encodeURIComponent(this.fileFolder);
this.router.navigate([folder, row.title],
{
relativeTo: this.activatedRoute
}
)
}
In my pdfViewerComponent (grandChild level): Note: I have to use decodeURIComponent() to undo it from parent level.
ngOnInit(): void {
this.activatedRoute.paramMap
.subscribe(
(params: any) => {
this.folder = decodeURIComponent( params.get('folder'));
this.title = params.get('title');
console.log(this.title);
this.pdfFile = this.folder + this.title;
}
);
}
in the documentViewer routing module (not in app.routing.ts):
const routes: Routes = [
{
path: 'books/:folder',
component: DocViewerComponent,
children: [{
path: ':folder/:title',
component: PdfViewerComponent
}]
}
];
It works. Thanks Naren Murali.