@ngx-starter-libs/ngx-utils v0.0.5

ngx-utils

same as @ngrx-utils/store without dependency on @ngrx/store

Pipes: filter, group-by, safeHtml

Directive: inViewport, ngLet, routerLinkMatch

Install

npm i @ngx-starter-kit/ngx-utils
# install peer dependencies
npm i date-fns

Usage

InViewport Directive

Add IntersectionObserver conditional polyfill to index.html for Safari Support

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

<div ngxInViewport (inViewport)="showMyElement=true">
  <ng-container *ngIf="showMyElement"> <div>Hello World!</div> </ng-container>
</div>

If entry.intersectionRatio >= 0.5 ==> Inside Viewport > If entry.intersectionRatio < 0.5 ==> Outside Viewport

lazy loading images example

<div *ngFor="let image of images" [oneTime]="true" (inViewport)="show($event, image)">
  <ng-container *ngIf="image.show"> <img src="{{ image.url }}" /> </ng-container>
</div>

  show(event: Partial<IntersectionObserverEntry>, image: ImageItem) {
    if (event.intersectionRatio >= 0.5) {
      image.show = true;
    }
  }

Flags

1. Trigger only One Time : [oneTime]="true" usecase: image loading.
2. Server-Side Rendering : By default, loads the elements on the server.

   If you do not want to pre-render the elements in server, you can set preRender to false. i.e.,preRender="false"`

Viewport Service

You can use ViewportService itself in any Component

import { ElementRef, OnDestroy, OnInit } from '@angular/core';
import { untilDestroy, ViewportService } from '@ngx-starter-kit/ngx-utils';

export class ViewportDemoComponent implements OnInit, OnDestroy {
  public constructor(private element: ElementRef, private viewportService: ViewportService) {}

  public ngOnInit(): void {
    this.viewportService
      .observe(this.element.nativeElement)
      .pipe(untilDestroy(this))
      .subscribe((entry: IntersectionObserverEntry) => {
        if (entry.isIntersecting) {
          this.show();
        } else {
          this.hide();
        }
      });
  }

  ngOnDestroy() {}

  private show(): void {
    // => Animation
  }

  private hide(): void {
    // <= Animation
  }
}

Development

Running unit tests

Run ng test ngx-utils to execute the unit tests.

Publish

# bump version in package.json
ng deploy ngx-utils --dry-run
ng deploy ngx-utils

Reference

• Improve Performance With Lazy Components