fix(image): add a loaded event

Author: Wykks

src/app/demo/examples/add-image.component.ts

@@ -8,9 +8,11 @@ import { Component } from '@angular/core';
     <mgl-image
       id="cat"
       url="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png"
+      (loaded)="imageLoaded = true"
     >
     </mgl-image>
     <mgl-layer
+      *ngIf="imageLoaded"
       id="points"
       type="symbol"
       [source]="{

src/app/lib/image/image.component.ts

@@ -1,6 +1,16 @@
-import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges
+} from '@angular/core';
 import { MapService } from '../map/map.service';
-import { MapImageOptions, MapImageData } from '../map/map.types';
+import { MapImageData, MapImageOptions } from '../map/map.types';
 
 @Component({
   selector: 'mgl-image',
@@ -16,11 +26,13 @@ export class ImageComponent implements OnInit, OnDestroy, OnChanges {
   @Input() url?: string;
 
   @Output() error = new EventEmitter<{ status: number }>();
+  @Output() loaded = new EventEmitter<void>();
 
   private imageAdded = false;
 
   constructor(
-    private MapService: MapService
+    private MapService: MapService,
+    private zone: NgZone
   ) { }
 
   ngOnInit() {
@@ -40,8 +52,13 @@ export class ImageComponent implements OnInit, OnDestroy, OnChanges {
             this.options
           );
           this.imageAdded = true;
+          this.zone.run(() => {
+            this.loaded.emit();
+          });
         } catch (error) {
-          this.error.emit(error);
+          this.zone.run(() => {
+            this.error.emit(error);
+          });
         }
       }
     });