Всегда на верхней панели navbar и router-outlet, с прокруткой до поддержки id?

Question

На протяжении многих лет я использовал много хакерских приемов, чтобы заставить это работать:

<app-navbar></app-navbar>
<router-outlet></router-outlet>

---

Первое решение с использованием углового материала:

<app-navbar></app-navbar>
<div style="padding-top: 55px">
    <router-outlet></router-outlet>
</div>

, которое ломает всевыделите ID решения, в том числе:

scrollToId(id: string) {
    const e = document.getElementById(id.startsWith('#') ? id.substring(1) : id);
    if (e != null)
      e.scrollIntoView({ behavior: 'smooth' });
}

и https://www.npmjs.com/package/ngx-page-scroll

---

Другое решение с Bootstrap:

<header [ngStyle]="getBottom()">
  <app-navbar></app-navbar>
</header>

<div class="container" style="margin-left: 0">
  <router-outlet></router-outlet>
</div>

Где реализовано getBottom()как:

getBottom() {
  return { 'margin-bottom':
`${this.alertsService.alerts.length ? this.alertsService.alerts.length * 6 : 6}em`}
}