overlay-bg.component.html

<a class="overlay-bg" (click)="overlayClicked($event)" [@overlayAnimation]="showsOverlay ? 'shows' : 'hides' ">
  <ng-content select="[overlay-bg]"></ng-content>
</a>

overlay-bg.component.scss

.overlay-bg {
  display: block;
  background-color: #00000095;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: default;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

overlay-bg.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-overlay-bg',
  templateUrl: './overlay-bg.component.html',
  styleUrls: ['./overlay-bg.component.scss'],
  animations: [
    trigger('overlayAnimation', [
      state('shows', style({ display: 'block' })),
      state('hides', style({ display: 'none' })),
      transition('shows <=> hides', [
        animate('300ms ease-in-out')
      ])
    ])
  ]
})
export class OverlayBgComponent implements OnInit {
  @Input() showsOverlay: boolean;
  @Output() overlayClick = new EventEmitter();
  constructor() { }

  ngOnInit(): void {
  }

  overlayClicked(event): any {
    this.overlayClick.emit(true);
  }
}

styles.scss

/* --------------------------------- Z-INDEX -------------------------------- */
app-root,
router-outlet {
  z-index: 1 !important;
}

.mobile-menu {
  z-index: 4 !important;
}
app-navbar, .nav, .nav-lg,
app-mobile-nav {
  z-index: 5;
}

app-overlay-bg, .overlay-bg { // Overlay added to global z-index to stay on top of nav elements (to ensure no scroll)
  z-index: 6 !important;
}

app-toast, .toast {
  z-index: 7 !important;
}