ngx-awesome-loader v0.1.1

Ngx Awesome Loader :india:

Versions

Table of contents

• Features
• Getting started
• Why Ngx Awesome Loader?

Features

• Better User Experience
• Client Side View Enhanced

Getting started

Step 1: Install ngx-awesome-loader:

NPM

npm install ngx-awesome-loader --save

Step 2: Import the NgxAwesomeLoaderModule :

import { NgxAwesomeLoaderModule } from 'ngx-awesome-loader';

@NgModule({
  declarations: [AppComponent],
  imports: [ NgxAwesomeLoaderModule ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Usage

Define options in your consuming component:

@Component({...})
export class ExampleComponent {
    array = Student[] = [];
    isLoading:boolean = false;
    currentTemplate:string = 'list';
    // template types are user-messages , list , table , product and notifications
}

In template use ngx-awesome-loader component with your options

<!--Using ng-container and ng-template for template rendering-->
<ng-container *ngIf="array && array.length; else loading"></ng-container>
<ng-template #loading>
    <ngx-awesome-loader [template]="currentTemplate" [isLoading]="isLoading" [count]="4">
    </ngx-awesome-loader>
</ng-template>

Why Ngx Awesome Loader?

• Whenever we have huge bunch of data to be displayed to user we either go for static loader or http loaders but what if we want to have a loader specific to a component then ngx-awesome-loader is a good choice.
• Upcoming feature will include card template and other custom templates.