Within my appComponent, I have a layout consisting of a toolbar, footer, and main content. The main content utilizes the router-outlet directive structured as follows:
<div class="h-100">
<app-toolbar></app-toolbar>
<app-breadcrumb></app-breadcrumb>
<div class="container h-100">
<router-outlet></router-outlet>
</div>
</div>
In the toolbar, there is a menu with various items, such as:
<button [routerLink]="['/list']" routerLinkActiveOptions="{exact:true}">List</button>
Upon clicking on a button, the respective page content is displayed through the router-outlet. Subsequently, when selecting a row, the row's details are meant to be shown. This can be achieved using:
<a [routerLink]="['detail/',row.id]">{{value}}</a>
Despite functionality working correctly, an issue arises where the parent component (the table) remains visible alongside the child component (DetailComponent). The routing configuration is outlined in the provided code snippet.
I attempted removing the
<router-outlet></router-outlet>For further reference, please see the following link: https://stackblitz.com/edit/angular-router-basic-example-n2uzis?file=app/views/details/detail.component.ts