CODEWITHSUNDEEP
angulartypescriptspinner
Ali
Ali

Reputation: 2591

How to define a component or service for customizing ng4-loading spinner

I use ng4-loading-spinner in my project. and it is very good.

You can customizing ng4-loading-spinner as you like. for example you can change timeout or template.

<ng4-loading-spinner [threshold]="2000" [timeout]="4000" [template]="template" [zIndex]="9999"></ng4-loading-spinner>

But if I want to change some features in ng4-loading-spinner, I should do it in every component that used ng4-loading-spinner.

How can I define a component or service for customizing ng4-loading-spinner?

Upvotes: 0

Views: 2183

Answers (2)

Ali
Ali

Reputation: 2591

I designed a component, and it's worked.

spinner.component.ts :

import { Component, Input, OnInit, OnChanges } from '@angular/core';

import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent implements OnInit, OnChanges {

  @Input() isDisplay: boolean = false;

  constructor(private spinnerService: Ng4LoadingSpinnerService) { }

  ngOnInit() {

  }
  //----------------------------------------------------------------------------
  ngOnChanges(){

    if(this.isDisplay){          
      this.spinnerService.show();
    }else{       
      this.spinnerService.hide();
    }
  }
}

spinner.component.html :

<ng4-loading-spinner [threshold]="2000" [timeout]="40000" [zIndex]="9999"></ng4-loading-spinner>

Now you can use this component in others, 

this.isDisplaySpinner = true;
    this.http.get(GLOBAL['CONFIG_URL'])
        .subscribe(data => {
            this.isDisplaySpinner = false;
        });

html :

<app-spinner [isDisplay]="isDisplaySpinner"></app-spinner>

Upvotes: 0

Raed Khalaf
Raed Khalaf

Reputation: 2065

I faced this issue before, using a component many times in the application, and bind some configuration to it, and when changing some of the configuration you should go over all the application usage and edit them.

I solve it by using an interface, in your case, "NgLoadingConfigInterface":

export interface NgLoadingConfigInterface {
 threshold: 2000,
 timeout: 4000,
 zIndex: 9999,
}

in this interface you set the common attributes across the application.

whenever you use "Ng4-loading" component you will implement this interface as follow:

@Component({
   ...
})
export class SomeComponent implements NgLoadingConfigInterface {
  ....
}

in the template just bind the Ng4-loading component attribute to the attributes from the interface.

<ng4-loading-spinner [threshold]="threshold" [timeout]="timeout" [zIndex]="zIndex">
<ng4-loading-spinner>

in this way, you will just update the values in the interface and it will reflect all over the application.

another solution is to encapsulate the component in another component, in this way you will pass the attributes needed to be changed as @Input

Upvotes: 1

Related Questions