@uoh/ngx-loader NPM

@uoh/ngx-loader

A loader for Angular >= 2.0 with the logo of the University of Haifa

Installation

To install this library, run:

$ npm install @uoh/ngx-loader --save

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install @uoh/ngx-loader

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the library
import { UohLoaderModule, UohLoaderService } from '@uoh/ngx-loader';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Import to NgModule
    UohLoaderModule
  ],
  // Import the service to activate the loader
  providers: [UohLoaderService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use the uoh-loader component in app.component.html -->
<h1>
  {{title}}
</h1>
<uoh-loader [size]="{width: 120}" [duration]="2000" [fps]="60" [minStrokeWidth]="5" [maxStrokeWidth]="30"
  [circle]="{stop1: 0.5, stop2: 0.7}"></uoh-loader>

Input Options

size - An object containing the width and/or the height of the loader. Note: only one of them is required, the other will be automatically calculated to constrain proportions
duration - A number representing the duration for the animation in milliseconds
fps - A number representing the frames per second for the animation
minStrokeWidth - A number representing the minimum width of the line
maxStrokeWidth - A number representing the maximum width of the line (the starting point)
circle - An object containing two stops representing the percentage of frames to reach the minimum (step1) and the maximum widths (step2)
path - A string containing svg coordinates for the figure (equivalent to the d attribute in a svg path)

Loader Activation

The loader is activated/deactivated by calling the functions show/hide in the UohLoaderService (respectively). The UohLoaderService exposes a BehaviorSubject of type Boolean named 'loading', which can be used to determine if a loading procedure is taking place.

For example, in your component.ts:

import { UohLoaderService } from '@uoh/ngx-loader';

@Component({
  selector: 'app',
  template: `
    <h1>
      {{title}}
    </h1>
    <button (click)="loadStuff()" [disabled]="loader.loading | async" >Load Stuff</button>
    <uoh-loader></uoh-loader>
  `
})
export class AppComponent {
  data: Stuff[];

  constructor(
    public loader: UohLoaderService,
    private apiService: ApiService
  ) {
  }

  loadStuff(): void {
    this.loader.show();
    this.apiService.loadStuff
      .subscribe(
        data => this.data = data,
        _,
        this.loader.hide()
      );
  }
}