How to organize tabs in Angular?

Question

Angular

I have a small project, it consists of a left menu and a central area, the main part of which is the router-outlet, in which the components are displayed and below this outlet there is a lamp chat. I also note that I use bootstrap.

The structure of app.component.html is the following:

<div class='container-fluid'>
  <div class='row'>
    <div class='col-sm-3'>
      <app-nav-menu></app-nav-menu>
    </div>
    <div class='col-sm-9 body-content app-content'>
        <router-outlet></router-outlet>
        <app-chat-window class="chat"></app-chat-window>
    </div>
  </div>
</div>

The components are all quite simple, there is a list (usually it is just a transition from the left menu item) and you can also display the details of the entity with standard editing functions. That is, just a standard crud with a list.
Here, for example, routing from the task module (issues)

const routes: Routes = [{
  path: 'issue', children: [
    { path: 'list', component: ListComponent },
    { path: 'edit/:id', component: EditComponent },
  ]
}];

The usual behavior of the user: he opens through the left menu, for example, the list of tasks (component ListComponent). It opens a tabular view with reduced information, then the user clicks the "details" button, after which another page with extended information opens (the EditComponent component). The downside here is that the first page is lost, so often users open task details in a new browser tab, but since this is an angular, the entire project is reloaded (well, or the necessary modules, but this is also almost the entire project). And I do not like it. An alternative here is the transfer of detailed information, for example, to a popup. Here you can even make the correct routing. But I don’t like this approach either, I don’t want to drive a healthy page into a small popup) There are other disadvantages,
I want to do the following, implement an analog of tabs. That is, there will be tabs on the page in the workspace (well, like Google Chrome). The component that we call from the left menu should resolve to the first tab. Let this tab be called Main and it cannot be closed. And if we follow the detailed information link, then this component should be rendered in the next tab.
As an example, I can show tabs from here .

The difficulty lies in the structure of the Angular project. Now, if the layout of the page came from the server, as they used to do on jQuery and the like, then I would have no questions) But with angular, I just got into some kind of dead end, I don’t even know how to approach.
We have one router outlet to have it. And it is in it that the first component is loaded and there is no need to overwrite it and display other data in it, that is, when the second tab is closed, we will have the first one, in which the data has already been loaded. Two router outlets cannot be added, as far as I understand, and it will be crooked in any case.