based on scroll position and get data attribute javascript

<div class="imageWrap"(scroll) = "onScroll($event,imageEl)">
  <ul>
  <li #imageEl * ngFor="let data of images; let i = index"
  [attr.data-image-id] = "image.id" >
    <div><img src ="{{data.img}}" width = "500" height = "600" /> </div>
  </li>
  </ul>
  </div>

@HostListener('scroll', ['$event'])
onScroll(event: any, indexI ?) {
  let els = document.getElementsByTagName("li");
  let offsetHeight = event.target['offsetHeight'];
  let scrollTop = event.target['scrollTop'];
  let scrollHeight = event.target['scrollHeight'];
  this.getImageById(id);
}
getImageById(id){
  this.apiService.getimageData(id).subscribe(images => this.images = images);
}