Spinner as Directive

[Cesar Smerling]

Hi! I created a service to load the spinner in a div component, but it creates a little bit of duplicated code. 

I tried to create a directive in angular to do the same thing on the div, but the spinner doesn't show. I debugged and the element and changes are working correctly.

Is there a way to implement the spinner as a directive??

This is the code of the directive:

import {Directive, ElementRef, Input, OnChanges, SimpleChanges} from "@angular/core";
import {createSpinner, hideSpinner, showSpinner} from '@syncfusion/ej2-angular-popups';

@Directive({
    selector: '[scs-spinner]',
})
export class ScsSpinnerDirective implements OnChanges{

    @Input() toggle: boolean;

    constructor(private el: ElementRef) {
        createSpinner({
            target: el.nativeElement
        });
    }

    ngOnChanges(changes: SimpleChanges) {
        if(changes.toggle){
            if(this.el.nativeElement)
                changes.toggle.currentValue ?
                    setTimeout( () => showSpinner(this.el.nativeElement), 200) :
                    setTimeout( () =>  hideSpinner(this.el.nativeElement), 200);
        }
    }
}

<div id="detailContent" scs-spinner [toggle]="(loading$ |async) || (applying$ | async)" ></div>

[Indrajith Srinivasan]

Hi Cesar,

Greetings from Syncfusion support,

We have validated your reported query. We have to make the runnable application with the shared snippet. But we couldn't successfully create it.  

 

Sample: https://stackblitz.com/edit/angular-uhycor?file=src%2Fapp%2Fhighlight.directive.ts 

 

Can you please replicate the issue in the above sample, so that we can validate and provide solution at earliest.

Regards, 

Indrajith 

[Cesar Smerling]

Hi,

Here I updated the example code to the changes.

https://stackblitz.com/edit/angular-uhycor-7nefq3?file=src%2Fapp%2Fapp.component.html

In the init of component the loading value changes as observable, and the OnChanges of the directive receive that value but the spinner doesn't show or hide.

Thanks

[Indrajith Srinivasan]

Hi Cesar,

Greetings from Syncfusion support,

We have validated your reported query. We have to make the runnable application with the shared snippet. But we couldn't successfully create it.  

 

Sample: https://stackblitz.com/edit/angular-uhycor?file=src%2Fapp%2Fhighlight.directive.ts 

 

Can you please replicate the issue in the above sample, so that we can validate and provide solution at earliest.

Regards, 

Indrajith 

[Cesar Smerling]

Ok, I don't understand clearly.

In the link:
https://stackblitz.com/edit/angular-uhycor-7nefq3?file=src%2Fapp%2Fapp.component.html

There is the example not working. The Spinner doesn't show.

In the link you gave me I don't know how to save the changes.

[Indrajith Srinivasan]

Hi Cesar,

Ignore our previous update, 

 

We have validated on the reported query. The spinner is not shown, since the styles are not referred. We suggest you to refer the styles to load the spinner. We have also modified the sample shared.

 

Refer the below style in the index.html file: 

 

Style: <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> 

Sample: https://stackblitz.com/edit/angular-uhycor-sdfkt3?file=src%2Fapp%2Fhighlight.directive.ts 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith