How to implement spinner in angular2 and spinner hiding is possible in angular2?

Question

I have some delay on image loading time that time I want show a spinner and after image loading time that spinner should hide. What is the correct way to implement this in angular 2 platform.

        <div id='panId' class="container-fluid" >

This is the images loading,

            <img name="imageName1" mouseWheel style.width="{{imgWidth}}" (mouseWheelUp)="mouseWheelUpFunc($event)" (mouseWheelDown)="mouseWheelDownFunc()" 

                *ngIf="showImage" id="mainImage" src="{{imageVisible ? droppedImage: firtsImageToBind}}" class="imagepics mg-image "

                alt="loading..." />


            <img  name="imageName2" id="mainImage" mouseWheel style.width="{{imgWidth}}" (mouseWheelUp)="mouseWheelUpFunc($event)"

                (mouseWheelDown)="mouseWheelDownFunc()" class="mg-image " *ngIf="zoomImageVisible" src="{{zoomedImage}}">
        </div>


</div>

There are several questions on SO discussing the use of spinners/loading indicators in Angular2 e.g. here. See if those can point you in the right direction — Garth Mason
– Garth Mason, Commented Mar 17, 2017 at 6:20

Mertcan Diken · Accepted Answer · 2017-03-17 07:14:41Z

1

take a look at PrimeNG they have spinner and it's open source so you can just use it.

http://primefaces.org/primeng

https://github.com/primefaces/primeng

https://github.com/primefaces/primeng/tree/master/components/spinner

answered Mar 17, 2017 at 7:14

Mertcan Diken

15.4k2 gold badges29 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sivam Over a year ago

Can I implement any conditional usage for css class loading and hiding that loaded class

Mertcan Diken Over a year ago

Did you try ngClass or ngStyle for this?

Collectives™ on Stack Overflow

How to implement spinner in angular2 and spinner hiding is possible in angular2?

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related