How to properly handle Navbar color change on Scroll in Angular?

import { HostListener } from '@angular/core';

You can achieve this with @HostListner in your Typescript file.

@HostListener('window:scroll', ['$event'])

onWindowScroll(e) {
    let element = document.querySelector('.navbar');
    if (window.pageYOffset > element.clientHeight) {
      element.classList.add('navbar-inverse');
    } else {
      element.classList.remove('navbar-inverse');
    }
  }

Put scroll event on HTML part.

<nav class="navbar navbar-expand-md sticky-top" (scroll)="onWindowScroll($event);"></nav>