My attempt to incorporate an overlay into a component by clicking a button mirrored this example:
https://stackblitz.com/edit/overlay-demo-fv3bwm?file=app/app.component.ts
However, upon integrating it into my component, the overlay elements (in this case just a textarea element) appeared beneath my rendered sidebar template instead of over the rendered router-outlet component.
Here is my sidebar template:
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading" > <a routerLink="">
<img style="width: 200px;" src="../../../assets/images/logo">
<br> <h4>App</h4></a></div>
<div class="list-group">
<a routerLink="requirements" routerLinkActive="active"
class="list-group-item list-group-item-action bg-light">Component1</a>
<a routerLink="dataset" routerLinkActive="active"
class="list-group-item list-group-item-action bg-light">Comonent2</a>
<a routerLink="dag" routerLinkActive="active"
class="list-group-item list-group-item-action bg-light">Comonent3</a>
<a routerLink="tasks" routerLinkActive="active"
class="list-group-item list-group-item-action bg-light">Comonent4</a>
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle"><i class="bi-arrow-right"></i>Toggle Menu</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0 ">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item text-center" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-center text-secondary" (click)="onLogout()">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<router-outlet></router-outlet>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
A similar issue arose when attempting to separate the sidebar from the router-outlet by transferring the router-outlet from the sidebar component to the app component:
<app-sidebar></app-sidebar>
<router-outlet><router-outlet>
Ultimately, only maintaining the sidebar template with the router-outlet tag and the app-sidebar tag in the app component resolved the issue:
<app-sidebar></app-sidebar>
The image indicates the desired location (marked in red) for the overlay, as opposed to the current position (marked in black).
Inspect overlay
Edit:
The issue is replicated in this stackblitz project (the overlay button is within part 1 nav link):
https://stackblitz.com/edit/angular-crud-deborahk-axtfg7?file=src%2Fapp%2Fapp.module.ts
Further investigation revealed that the overlay is malfunctioning, extending beyond the sidebar problem as clicking the overlay button continuously generates templates. Here is the sidebar with the black cross marking and the overlay display:
overlay output
*Note: The stackblitz example utilizes Angular 9, while my project is based on Angular 11.*