Unable to customise spinner

[Tora-Bora]

I should use my own spinner. It would be great if i could create my own component like SkWanderingCubesComponent and set it to spinner , but you hardcoded component names in spinner.component.html. May be it would be better to use ng_content inside spinner component?

[mpalourdio]

That's definitely something I'm planning in the near future.

[zapbr]

did you have any predictions for this feature?

[mpalourdio]

No ETA at the moment. I wish this feature could land in master by the end of January but I miss time :(

[zapbr]

I was thinking.
If you put a new property 'customHTML' and 'customStyle' that, if exists, replaces the 'template' and 'styles' on decorator?
I think it is a simple solution but very very powerful.

[mpalourdio]

Is it even possible ? Any resource with this trick somewhere ?

[zapbr]

I think it is possible I will try todo this on my local environment and send you the code. Em 12 de jan de 2018 18:18, "Michel Palourdio" <notifications@github.com> escreveu:

…

Is it even possible ? Any resource with this trick somewhere ? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#31 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABPyneAp0n-M2oc5uYswK1foViuJdLQ3ks5tJ73egaJpZM4Q17n-> .

[zapbr]

I tested and this worked very well.

On 'SpinnerComponent.propDecorators':

"customTemplate": [{ type: core_1.Input },],

On 'SpinnerComponent.decorators' changed the template attribute:

template: "<div *ngIf=\"isSpinnerVisible && customTemplate\" [innerHTML]=\"customTemplate\" ></div><div id=\"spinner\" *ngIf=\"isSpinnerVisible && !customTemplate\" ><sk-cube-grid *ngIf=\"spinner === Spinkit.skCubeGrid\" [backgroundColor]=\"backgroundColor\"></sk-cube-grid><sk-chasing-dots *ngIf=\"spinner === Spinkit.skChasingDots\" [backgroundColor]=\"backgroundColor\"></sk-chasing-dots><sk-double-bounce *ngIf=\"spinner === Spinkit.skDoubleBounce\" [backgroundColor]=\"backgroundColor\"></sk-double-bounce><sk-rotating-plane *ngIf=\"spinner === Spinkit.skRotatingPlane\" [backgroundColor]=\"backgroundColor\"></sk-rotating-plane><sk-spinner-pulse *ngIf=\"spinner === Spinkit.skSpinnerPulse\" [backgroundColor]=\"backgroundColor\"></sk-spinner-pulse><sk-three-bounce *ngIf=\"spinner === Spinkit.skThreeBounce\" [backgroundColor]=\"backgroundColor\"></sk-three-bounce><sk-wandering-cubes *ngIf=\"spinner === Spinkit.skWanderingCubes\" [backgroundColor]=\"backgroundColor\"></sk-wandering-cubes><sk-wave *ngIf=\"spinner === Spinkit.skWave\" [backgroundColor]=\"backgroundColor\"></sk-wave></div>",

On my HTML i simple put

<spinner customTemplate='<img src="http://www.linkinads.com/images/loading-blue.gif" alt="loader">' ></spinner>

I trying to figure out how to do the same with the styles ... but, if you put the styles on the project SCSS work fine.

[mpalourdio]

Thanks for trying. I was more thinking of giving directly an html file, that could be evaluated/compiled.
Something like a mix betweenfile_get_contents in php && $compile in angularjs

NgComponentOutlet could do the job.

[mpalourdio]

This pseudo code could be cool

<spinner [htmlTemplate]="'path/to/file.html'" [cssTemplate]="'path/to.css'"></spinner>

[zapbr]

Hummm Looks a better solution and very elegant way. In other components they have everything on config files. But in this way is more flexible. I like it. Em 12 de jan de 2018 19:34, "Michel Palourdio" <notifications@github.com> escreveu:

…

Pseudo code could be cool html <spinner [htmlTemplate]="'path/to/file.html'" [cssTemplate]="'path/to.css'"></spinner> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#31 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABPynf-JYAvr3OdQQ5pntiepY_W2NtWzks5tJ8_ygaJpZM4Q17n-> .

[mpalourdio]

It appears that I can't hack someting acceptable with this idea. But, ngComponentOutlet pretty does the job, And I find it cleaner than a single <ng-content>.

@Tora-Bora , @zapbr, what do you think about linking a full component rather than adding content between <spinner> tags ?

IMO, it allows a better 'SoC', with own logic possibility, custom css and HTML

[zapbr]

Totally agree
The current solution is nice, but a full component is way more powerful and customisable.
Sounds like a new milestone

[mpalourdio]

Code and tests for this feature has landed into master. It needs documentation before releasing.

[mpalourdio]

Documentation here : https://github.com/mpalourdio/ng-http-loader/blob/0.7.0/README.MD#defining-your-own-spinner if you want to give it a read before the release.