With an angle directive detect when I scroll on several div [closed]

It's something like this but implemented in an angle directive that I do not have much knowledge about angle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollable" id="content1">
  <div class="box"></div>
</div>
<div class="scrollable" id="content2">
  <div class="box"></div>
</div>
<div class="scrollable" id="content3">
  <div class="box"></div>
</div>

<style type="text/css"> 
.scrollable {
  background-color: gray;
  height: 300px;
  margin: auto;
  overflow: auto;
  padding: .5rem;
  width: 300px;
}

.box {
  background-color: orange;
  height: 1000px;
  margin: auto;
  width: 70px;
}
</style>

<script>    
let hijos = document.querySelectorAll('.scrollable');
    for (hijo of hijos) {
       hijo.addEventListener('scroll', function (e) {
      console.log('scrolling in ', e.target.id);
    });
}
</script>