in Angular Signals, can you use viewChild() + effect() to handle changes to a child element?

Let's say I want to know when a particular child element in my component is scrolled. Suppose I declare:

contentPanel = viewChild.required<ElementRef>('contentPanel');
contentScrollTop = computed(
() => this.contentPanel().nativeElement.scrollTop,
);


and then in the constructor an effect like:

effect(() => {
console.log('scrolltop: ', this.contentScrollTop());
});


So this doesn't actually work but... is there a way this approach can work? or are properties of nativeElement outside of changes that Signals can detect? I can easily do this with an event listener, just curious if there's a more Signals-y way to do it.

Continue reading...