2

I am new to AngularJS. I am trying to put a spinner as a background to all images. There are several images, so I cannot use a single variable isLoaded inside the ts file.

I use this in the template:

<img src="{{document.thumbUrl}}" class="spinner" (load)="loaded()" />

Then in the function loaded() inside the ts file, how can I access the element that triggered the event? And how can I remove the class spinner on that particular element which triggered the event?

Hardik Vaghani
  • 2,163
  • 24
  • 46
  • is this question about Angular.js or Angular2? It's not really clear, other than you mention TypeScript, that isn't commonly used with Angular.js. – Claies Dec 17 '16 at 03:11
  • 1
    @Claies , I think you're being deliberately stupid , with all due respect ! It's more than clear that this is Angular 2 , and by the way, Angular to is AngularJS2 . – Milad Dec 17 '16 at 03:56
  • Angular.js and Angular 2 are **completely different frameworks**. you tagged both, but clearly your question doesn't apply to both. – Claies Dec 17 '16 at 03:58

2 Answers2

3
<img src="{{document.thumbUrl}}" class="spinner" (load)="loaded($event)" />

inside your class 

constructor(private renderer:Renderer){


}

loaded($event){

  console.log($event.target); // is the img
   this.renderer.setElementClass($event.target, '', false);
}

And maybe a bit smarter : 

<img #image src="{{document.thumbUrl}}" [class.spinner]="!image.loaded" (load)="image.loaded='true'" />
Milad
  • 27,506
  • 11
  • 76
  • 85
1

After learning directives I did it as follows:

import {Directive, ElementRef, Input, HostListener, Renderer} from '@angular/core';

@Directive({selector: '[myLoading]'})
export class ImageLoadingDirective
{
    constructor(private el: ElementRef,
                private renderer: Renderer)
    {
    }

    @HostListener('load') onLoad()
    {
        this.renderer.setElementClass(this.el.nativeElement, 'loading', false);
    }

    @HostListener('error') onError()
    {
        this.renderer.setElementClass(this.el.nativeElement, 'errLoading', false);
    }
}

Then you just add myLoading as an attribute to any image. Of course you should define loading and error classes in CSS, and also you should add this directive into the module declarations section.

Sorry, this "framework" sucks in many respects. Other than the typed language and reactive programming I don't see any merit in this.

PS. What I didn't understand is that the function names onLoad and onError seem to be arbitrary. I didn't call them anywhere, and I can choose any names for them, but they still work. No idea what is the point.

  • The names are indeed arbitrary. Angular2 also makes it really painful to refactor your code into reusable chunks which is supposed to be the whole point of component oriented programming. With respect to a typed language, angular's use of TypeScript's excellent capabilities is very poor. They tend to treat types like a run-time construct, which only works for classes, and only sort of because they're still values rather than types at runtime and most of the APIs take and return `any`. In short, I think your frustration is warranted. – Aluan Haddad Dec 17 '16 at 05:29