Angular 6 - добавить класс при встрече с разделом

Я хочу добавить класс .active к элементу, когда прокручиваю вниз до раздела. У меня есть два раздела, и я добавляю класс, активный по щелчку, а href = "#o-nas переводит меня на <section id = "o-nas">...</section>. Я хочу прокрутить страницу вниз и изменить активный класс в зависимости от позиции прокрутки.

Как я могу это сделать с Angular 6?

<nav class = "navbar navbar-expand-lg navbar-light bg-light">
  <div class = "container">
    <a class = "navbar-brand d-flex align-items-center" (click) = "goToTop()" routerLink = "/">
      <img src = "assets/logo_studio.png">
    </a>

    <div class = "collapse float-right">
      <ul class = "navbar-nav">
        <li class = "nav-item" [class.active] = "router.url == '/'">
          <a class = "nav-link d-flex align-items-center"  (click) = "goToTop()"  (mouseenter) = "hover[0] = true" (mouseleave) = "hover[0] = false" [class.active] = "hover[0] && router.url !== '/'" routerLink = "/">
            <i class = "fas fa-home"></i>
            Strona główna
          </a>
        </li>
        <li class = "nav-item" [class.active] = "router.url == '/#o-nas'" *ngIf = "router.url !== '/video' && router.url !== '/galeria'">
          <a class = "nav-link d-flex align-items-center" (mouseenter) = "hover[1] = true" (mouseleave) = "hover[1] = false" [class.active] = "hover[1] && router.url !== '/#o-nas'"  href = "#o-nas">
            O Nas
          </a>
        </li>
        <li class = "nav-item" [class.active] = "router.url == '/#kontakt'" *ngIf = "router.url !== '/video' && router.url !== '/galeria'">
          <a class = "nav-link d-flex align-items-center" (mouseenter) = "hover[2] = true" (mouseleave) = "hover[2] = false" [class.active] = "hover[2] && router.url !== '/#kontakt' " href = "#kontakt">
            Kontakt
          </a>
        </li>
        <li class = "nav-item" [class.active] = "router.url == '/galeria'">
          <a class = "nav-link d-flex align-items-center" (mouseenter) = "hover[3] = true" (mouseleave) = "hover[3] = false" [class.active] = "hover[3] && router.url !== '/galeria'" routerLink = "/galeria">Galeria</a>
        </li>

        <li class = "nav-item" [class.active] = "router.url == '/video'">
          <a class = "nav-link d-flex align-items-center" (mouseenter) = "hover[4] = true" (mouseleave) = "hover[4] = false" [class.active] = "hover[4] && router.url !== '/video'" routerLink = "/video">Video</a>
        </li>
      </ul>
    </div>
  </div>
</nav>