jQuery hace que aparezca el complemento o el punto de referencia para detectar si el elemento está visible o no en la ventana gráfica. Investigué un poco, no puedo encontrar y me pregunto si Angular2 tiene un complemento similar. Si aún no, ¿cuál es la mejor manera de hacer algo así?
Así es como lo hago:
sync-dom.utils.ts
static isInViewPort(rect: ClientRect, threshold = 0) { return rect && rect.height && rect.top + rect.height + threshold >= 0 && rect.left + rect.width + threshold >= 0 && rect.bottom - rect.height - threshold <= SyncDomUtils.windowHeight && rect.right - rect.width - threshold <= SyncDomUtils.windowWidth; } dom.utils.ts
async isInViewPort(rect: ClientRect) { return SyncDomUtils.isInViewPort(rect); }y en tu componente haces:
async isInViewPort() { // you have to import the Renderer and ElementRef from angular/core this.boundingRect = await this.domElementUtils .invokeElementMethod(this.renderer, this.el.nativeElement, 'getBoundingClientRect'); return await this.domUtils.isInViewPort(this.boundingRect); }y use esa función como this.isInViewPort() y devolverá un valor booleano
este es el método del elemento de invokeElementMethod que tengo en dom-element.utils.ts
async invokeElementMethod<T extends keyof HTMLElement>(renderer: Renderer, element: any, methodName: T, args?: any[]) { return await renderer.invokeElementMethod(element, methodName, args) as any; }