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?
<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'" />
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.
any. In short, I think your frustration is warranted.