How to track the scroll event of an element (not the window) using a directive in Angular (v2+)

Question

Hello, I’m creating a screen with this structure:

<div class="wrapper">
  <div class="appbar">
    ...
  </div>
  <div class="main" #main>
    <router-outlet></router-outlet>
  </div>
</div>

• The wrapper has the total screen size, being that it is flex.
• The appbar persists the menus referring to the solution.
• The main is where the routes are rendered. only it has scroll

My problem is this. When I try to track down window from a Hostlistener, I can’t detect that the main had some kind of scroll..

my component is like this so far:

@Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html',
  styleUrls: ['./overview.component.scss']
})
export class OverviewComponent {
  @ViewChild('main') mainRef: HTMLElement;
  @HostListener('window:scroll', ['$event']) onScroll(e:Event) {
    console.log(e);
  }
}

What I need to do to track the scroll that occurs inside the main?