Dracong Loading decorator

Description

An Angular decorator which listens to rxjs observable changes and shows/hides loading animation

Donating

You can also help me and the project out by contributing through a donation on PayPal.

Installation

1. npm install @dracong/loading-decorator --save

2. Add LoadingDecoratorModule import to your @NgModule like example below

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { MyTestApp } from './my-test-app';
   import { LoadingDecoratorModule } from 'ng4-intl-phone';
   @NgModule({
       imports:      [ BrowserModule, LoadingDecoratorModule ],
       declarations: [ MyTestApp ],
       bootstrap:    [ MyTestApp ]
   })
   export class MyTestAppModule {}

Usage

1. Import the module

Add LoadingDecoratorModule import to your @NgModule like example below

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyTestApp } from './my-test-app';
import { LoadingDecoratorModule } from 'ng4-intl-phone';
@NgModule({
imports:      [ BrowserModule, LoadingDecoratorModule ],
declarations: [ MyTestApp ],
bootstrap:    [ MyTestApp ]
})
export class MyTestAppModule {}

2. Add the directive to your app component

In order to use the decorator we need to add the directive to some higher level component in our app. It has to be done only once in the whole app

<div dracongLoading>
  <router-outlet></router-outlet>
</div>

2. Add decorator

Add the decorator to any method which returns an Observable and it will take care of showing and hiding the animation

   
   export class MyTestApp implements OnInit {
   
     @DracongLoading
     save$(object: Data): Observable<Response> {
       return this.http.post<Response>(`${apiurl}${this.path}`, object);
     }
   }

License

• License: MIT

Author

• Author: kondi0

Mail

• Mail: [email protected]