common-ui/src/lib/directives/has-scrollbar.directive.ts
2023-03-19 10:09:06 +02:00

34 lines
963 B
TypeScript

import { ChangeDetectorRef, Directive, ElementRef, HostBinding, HostListener, OnChanges, OnInit } from '@angular/core';
@Directive({
selector: '[iqserHasScrollbar]',
standalone: true,
})
export class HasScrollbarDirective implements OnInit, OnChanges {
@HostBinding('class') class = '';
constructor(protected readonly _elementRef: ElementRef, protected readonly _changeDetector: ChangeDetectorRef) {}
get hasScrollbar() {
const element = this._elementRef?.nativeElement as HTMLElement;
return element.clientHeight < element.scrollHeight;
}
ngOnInit() {
setTimeout(() => this.process(), 0);
}
@HostListener('window:resize')
process() {
const newClass = this.hasScrollbar ? 'has-scrollbar' : '';
if (this.class !== newClass) {
this.class = newClass;
this._changeDetector.markForCheck();
}
}
ngOnChanges() {
this.process();
}
}