HasScrollbar directive with signals

src/lib/directives/has-scrollbar.directive.ts

@@ -1,39 +1,36 @@
-import { ChangeDetectorRef, Directive, ElementRef, HostBinding, OnDestroy, OnInit } from '@angular/core';
+import { Directive, ElementRef, OnDestroy, OnInit, signal } from '@angular/core';
 
 @Directive({
     selector: '[iqserHasScrollbar]',
     standalone: true,
+    host: {
+        '[class]': '_class()',
+    },
 })
 export class HasScrollbarDirective implements OnInit, OnDestroy {
-    @HostBinding('class') class = '';
     private readonly _resizeObserver: ResizeObserver;
+    protected readonly _class = signal('');
 
-    get hasScrollbar() {
-        const element = this._elementRef?.nativeElement as HTMLElement;
-        return element.clientHeight < element.scrollHeight;
-    }
-
-    constructor(
-        protected readonly _elementRef: ElementRef,
-        protected readonly _changeDetector: ChangeDetectorRef,
-    ) {
-        this._resizeObserver = new ResizeObserver(entry => {
+    constructor(protected readonly _elementRef: ElementRef) {
+        this._resizeObserver = new ResizeObserver(() => {
             this.process();
         });
 
         this._resizeObserver.observe(this._elementRef.nativeElement);
     }
 
+    private get _hasScrollbar() {
+        const element = this._elementRef?.nativeElement as HTMLElement;
+        return element.clientHeight < element.scrollHeight;
+    }
+
     ngOnInit() {
         setTimeout(() => this.process(), 0);
     }
 
     process() {
-        const newClass = this.hasScrollbar ? 'has-scrollbar' : '';
-        if (this.class !== newClass) {
-            this.class = newClass;
-            this._changeDetector.markForCheck();
-        }
+        const newClass = this._hasScrollbar ? 'has-scrollbar' : '';
+        this._class.set(newClass);
     }
 
     ngOnDestroy() {