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.

• Components
• Directives
  • ClickOutsideDirective
  • FormTouchOnHoverDirective
  • StopPropagationDirective
  • DebounceChangeDirective
  • TrackByField
  • LoadClickDirective
• Pipes
  • EnumPipe
  • SanitizePipe
  • TimePassedPipe
  • EnumKeyFormatPipe
• Helper Classes
  • OnChange

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.

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

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

• Closing modals, dropdowns, mobile navigations when clicked outside.
• Toggling off one item when another is clicked (accordion)

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

<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>

• This directive is particularly useful when you want to provide information on why the submit button is disabled. Since hovering over it will trigger any validation on the form.

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

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

• When ever you need to stopPropagation on an event, you can use this directive rather then passing the event along

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

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

• When ever you need to emit events with a delay

<div *ngFor="let item of items; jpTrackByField:'test'"></div>

@NgModule({
  imports: [TrackByFieldModule.defaultKey()]
})
export class Module {}

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

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

• For preventing double click on the submit button.

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

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

• It's most commonly used to easily iterate over an enum in a select

No parameters for EnumPipe

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

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

• Rendering raw html, styles...

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

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

• Displaying elapsed time

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

• This pipe is useful when ever you need to iterate an object in your template

No parameters for ArrayFromObjectPipe

A decorator for change detection on properties

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

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

@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();
}

MIT © Jaspero Ltd