Show spinner while loading image in angular

Asked Aug 16 '20 at 15:23

Active Aug 16 '20 at 15:23

Viewed 1,008 times

how can i show spinner while i'm loading images in my angular? i don't want my image load piece by piece

i tried this way but it didn't work out:

imageLoader = false;  loading: boolean = true
    
    onLoad() {
        this.loading = false;
    }

    <img *ngIf="loading" src="/assets/loading.gif" alt="loading" />
    <img [hidden]="loading" (load)="onLoad()" src="{{ source }}" />

asked Aug 16 '20 at 15:23

AliRhz

Where did you get your image source via API call or from asset directory? – Muthupriya Aug 16 '20 at 15:58
it comes from api – AliRhz Aug 16 '20 at 16:12
Then do your logic before getting a response and after getting a response. For example: **this.loading = true; this.dataService.sendGetRequest().subscribe((data: any[])=>{ this.source = data.src; this.loading = false; });** – Muthupriya Aug 16 '20 at 16:14
ok thanks i will try it – AliRhz Aug 16 '20 at 16:19

Show spinner while loading image in angular

0 Answers0