Angular: Route from Card to a new View - html

Question

I am working on an exercise project in Angular (latest V).
My App instanciates bootstrap cards dynamically from an Order Array and show them on my "Order-Item-Component through my template.
I added Routing so that I can update my OrderId on the Browser-Link after a click. It is working.
What I want is: If a user clicks on one of my cards - a whole new View Opens with my Order-Detail-Component for that specific Id. My cards should be invisible in that view. Subsequently, the user can go back to the cards-view with 'back' Link.
I don't know how to route so that my cards are going to be replaced by the Detail View.
Where do I have to place my 'router-outlet' for the detail-comp? I know, that I cannot place it in the same View as my Order-Component - because there are both visible in this case.
Here is my app.routing.ts: (The first route for orders is working fine)
import {RouterModule, Routes} from '#angular/router';
import {OrderComponent} from './order/order.component';
import {ORDER_ROUTES} from './order/order.routes';
import {OrderDetailComponent} from './order/order-detail/order-detail.component';
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/orders', pathMatch: 'full'},
{ path: 'orders', component: OrderComponent},
{ path: 'orders/:id', component: OrderDetailComponent
];
export const routing = RouterModule.forRoot(APP_ROUTES);
Here is my Order.Component.html:
<div class="container-fluid"><br>
<h2 id="heading-order"><i class="fa fa-shopping-cart f-left "></i>Open Orders</h2>
<p id="heading-items"> {{ orders.length }} Items </p>
</div>
<app-order-list></app-order-list>
<app-order-completed></app-order-completed>
Thanks in advance.

Answer 1

You might be able structure your app this way:
app.component.html:
<router-outlet></router-outlet>
routing module:
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/orders', pathMatch: 'full'},
{ path: 'orders', component: OrderComponent},
{ path: 'order-details/:id' component: OrderDetailsComponent}
];
order.component.html:
Provide [routerLink]="['/order-details', id] on your card, and pass the parameters to identify cards
Order component can also include <order-completed> in the view, if you need the completed orders to behave the same way, have them link to order details in the same way as the other orders.
To navigate back to the list of order, in your order-details.component.html provide a router link like routerLink="/orders"

Answer 2

You would use <router-outlet> instead of the custom tags <app-order-list></app-order-list>, <app-order-completed></app-order-completed> in your app component.
This way you can create child views:
const APP_ROUTES: Routes = [
{ path: '',
pathMatch: 'full',
component: OrderComponent,
children: [
{ path: 'order-list', component: OrderListComponent},
{ path: 'orders-completed', component: OrderCompletedComponent},
]},
];
And this is how the OrderComponent would look like:
<div class="container-fluid"><br>
<h2 id="heading-order"><i class="fa fa-shopping-cart f-left "></i>Open Orders</h2>
<p id="heading-items"> {{ orders.length }} Items </p>
</div>
<router-outlet></router-outlet>
Then use routerLink="/orders-completed" on a <button> or <a> tag to navigate