Home

Awesome

semantic-release CircleCI NPM Version

@jaspero/ng-helpers

A collection of useful components, directives and pipes for Angular applications.

Every item (component, directive and pipe) is published in a separate module, making it easy to just import modules your application will use and not increase bundle size unnecessarily.

Installation

To install this library, run:

$ npm install --save @jaspero/ng-helpers

Then import any Module you need. For example if you need the ClickOutsideDirective import the ClickOutsideModule.

Components

Directives

ClickOutsideDirective

This directive listens for emitted events on the window object and emits if the event doesn't contain the target element.

Example

<div (jpClickOutside)="doSomething()"></div>

Use Cases

Outputs

namedescription
jpClickOutsideEmits when current element isn't contained in the event

Inputs

nametypedefaultdescription
clickOutsideEventTypestring'click'event to listen for
clickOutsideBlockbooleanfalseif true jpClickOutside doesn't emit

FormTouchOnHoverDirective

This directive requires a FormGroup or FormArray then on mouseenter loops over all controls and marks them touched.

Example

<form [formGroup]="someForm">
  <input type="text" formControlName="someControl">

  <!--We wrapp the button so that we get mouseover event's even when the submit is disabled-->
  <div jpFormTouchOnHover>
    <button type="submit" [disabled]="someForm.invalid">Save</button>
  </div>
</form>

Use Cases

Outputs

namedescription
jpFormTouchOnHoverEmits when controls finish looping and every element was touched

Inputs

nametypedefaultdescription
jpFormTouchedFormGroup or FormArraynullset of controls to loop over

StopPropagationDirective

Listens for the emitted event on the target element and simply forwards it along and calls event.stopPropagation().

Example

  <button (jpStopPropagation)="doSomething()">Click</button>

Use Cases

Outputs

namedescription
jpStopPropagationEmits the original event after calling stopPropagation

Inputs

nametypedefaultdescription
preventDefaultbooleanfalseshould event.preventDefault() also get called.
stopPropagationEventTypestring'click'what event to listen for
conditionboolean or (event) => booleanundefineda condition to check before calling event.stopPropagation()

DebounceChangeDirective

Listens for the emitted event on the target element and simply forwards it along after debounceTime.

Example

  <input type="text" (jpDebounceChange)="doSomething()" />

Use Cases

Outputs

namedescription
jpDebounceChangeemits original event after debounceTime

Inputs

nametypedefaultdescription
debounceTimenumber500value to pass to the debounceTime pipe
debounceChangeEventTypestring'keyup'what event to listen for
emitOnlyOnChangebooleanfalseonly emit event if the value changes

TrackByFieldDirective

Example

<div *ngFor="let item of items; jpTrackByField:'test'"></div>
@NgModule({
  imports: [TrackByFieldModule.defaultKey()]
})
export class Module {}

LoadClickDirective

Listens for the emitted click event on the target element and add loading class.

Example

  <button [jpLoadClick]="save()">Submit</button>

Use Cases

Inputs

nametypedefaultdescription
jpLoadClickObservable<any>null
loadClickClassstring'loading'
loadClickStopPropagationbooleanfalseShould stopPropagation be called.
loadClickEventTypestring'click'
loadClickPreventDefaultbooleanfalseShould preventDefault be called.
disableAttributebooleantrueShould the disabled attribute be attached to the element.

Pipes

EnumPipe

A very simple pipe that returns an array of {key: number, value: string} objects from an enum.

Example

  <select>
    <option *ngFor="let item of someEnum | jpEnum" [value]="item.key">
      {{item.value}}
    </option>
  </select>

Use Cases

Input Value

valuetypedescription
valueenumSupports any enum value. Provide it in typescript someEnum = SomeEnum to iterate over in html.

Parameters

No parameters for EnumPipe

SanitizePipe

Simplifies using of DomSanitizer. The pipe accepts any value and then tries to sanitize it to the desired format.

Example

<div [innerHtml]="unsanitizedHtml | jpSanitize:'html'"></div>

Use Cases

Input Value

valuetypedescription
valuestringAccepts any unsanitized string and runs it through DomSanitizer

Parameters

paramtypedefaultdescription
typehtml or style or script or url or resourceUrlhtmlType of entry value. This determines what DomSanitizer method get's used

TimePassedPipe

This pipe takes a date as input and returns the elapsed time since that date as a number in the desired format.

Example

<div>
 {{someDate | jpTimePassed:null:timePassedType.Minute}} minutes ago
</div>

Use Cases

Input Value

valuetypedescription
valueDateany date

Parameters

paramtypedefaultdescription
dateTwoDatecurrent dateThis is the ending date in the interval. It defaults to the current date.
typeTimePassedTypeTimePassedType.MinuteIn what time format should the elapsed time be returned in.

EnumKeyFormatPipe

Example

<div *ngFor="let item of someObject | jpArrayFromObject">
  <span>KEY: {{item.key}}</span>
  <span>VALUE: {{item.value}}</span>
</div>

Use Cases

Input Value

valuetypedescription
valueobjectany object

Parameters

No parameters for ArrayFromObjectPipe

Decorators

OnChange

A decorator for change detection on properties

Example

export class AppComponent {
  @OnChange<string>((value, simpleChange) => {
      console.log(`Title is changed to: ${value}`);
  })
  @Input()
  title: string;
}

JpFunction

Decorator for methods used by LoadClickDirective. <br> Wraps them in function and expects return of type Observable.

Parameters

valuetypedescription
takenumberWhen JpFunction is called programmatically by default append take(1) to Observable. Pass 0 to skip take operator.

Example

@JpFunction()
waitFor(milliseconds: number = 1000) {
  return of(true).pipe(
    delay(milliseconds)
  );
}
@JpFunction({take: 2})
count() {
  return interval(10).pipe(
    tap((index) => {
      console.log(index);
    })
  );
}

ngOnInit() {
  // Triggers console.log for 0 and 1
  this.count();
}

License

MIT © Jaspero Ltd