0.2.3 • Published 7 years ago
@uoh/ngx-loader v0.2.3
@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()
);
}
}
Development
To generate all *.js
, *.d.ts
and *.metadata.json
files:
$ npm run build
To lint all *.ts
files:
$ npm run lint
License
MIT © Pablo Saracusti