how can i include a javascript code in angular 2+?

Question

I am including this script tag in my HTML page, but it doesn't seem to work. can anyone please help? I need it for my project. I need to get a sticky header. here is the entire code for reference:

<div class="row" id="myHeader"><div class="column heading"><span>KC</span>Electronics</div>
<div class="column container h-100">
    <div class="d-flex justify-content-center h-100">
      <div class="searchbar">
        <input class="search_input" type="text" name="" placeholder="Search...">
        <a href="#" class="search_icon"><i class="fas fa-search"></i></a>
      </div>
    </div>
</div>
<div class="column contact" style="text-align: right;">
    <b>Call Us:</b><span> 9876543210</span><br>
    <b>Email:</b><span> kcelectronics@gmail.com</span>
</div>
</div>
<script>
    // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
    window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
    </script>

Answer 1

You should use HostListener in component ts code as

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

@HostListener("window:scroll", [])
onWindowScroll() {
   this.scrollFunction();
}

scrollFunction() {
      if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        document.getElementById("navbar").style.padding = "30px 10px";
        document.getElementById("logo").style.fontSize = "25px";
      } else {
        document.getElementById("navbar").style.padding = "80px 10px";
        document.getElementById("logo").style.fontSize = "35px";
      }
}

Updated:

With your new code, you should move variable inside function as and call in HostListener .

In angular, you should not handle script in html file move them to component ts file.

myFunction() {
  var header = document.getElementById("myHeader");
  var sticky = header.offsetTop;
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

Answer 2

You can add @HostListener directive into your root component (mostly it is app.component.ts ) to handle window scroll event

import {Component, HostListener, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
  }

  @HostListener('window:scroll')
  scrollFunction() {
    if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
      document.getElementById('navbar').style.padding = '30px 10px';
      document.getElementById('logo').style.fontSize = '25px';
    } else {
      document.getElementById('navbar').style.padding = '80px 10px';
      document.getElementById('logo').style.fontSize = '35px';
    }
  }
}