diff --git a/src/lib/directives/has-scrollbar.directive.ts b/src/lib/directives/has-scrollbar.directive.ts index eefd625..7b400f7 100644 --- a/src/lib/directives/has-scrollbar.directive.ts +++ b/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() {