Actually fix images loading

src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.html

@@ -1,5 +1,5 @@
 <form class="center big-frame background-border" #accountForm="ngForm" (ngSubmit)="onSubmit()">
-  <h3>Login</h3>
+  <h3>Create New Item</h3>
 
   <div class="frame-item">
     <input type="text" [(ngModel)]="newItem.name" name="ItemName" placeholder=" " />

src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.ts

@@ -91,7 +91,7 @@ export class NewItemComponent {
               await this.sleep(3000);
               this.router.navigate(["/catalog"]);
             }else{
-              this.errorMsgs = ["Email was not able to be verified please resend email"];
+              this.errorMsgs = ["Error has ocurred"];
             }
         },
         error: err => {

src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.html

@@ -5,7 +5,7 @@
                 <button class="gameCard-Prev" onclick="">❮</button>
                 <button class="gameCard-Next" onclick="">❯</button>
             </div>
-            <div *ngIf="product.images.length > 0 && product.images[product.curShowingIMG]?.imageSrc" >
+            <div *ngIf="product.images.length > 0" >
                 <img class="gameCard-Img" [src]="product.images[product.curShowingIMG].imageSrc">
             </div>
         </div>

src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, NgZone } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { FormsModule, NgModel } from '@angular/forms';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
@@ -6,7 +6,6 @@ import { Title } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { Authentication } from '../../../services/Authentication';
 import { Product } from 'app/models/Product';
-import { ChangeDetectorRef } from '@angular/core';
 
 @Component({
   selector: 'catalog',
@@ -18,7 +17,7 @@ export class CatalogComponent {
 
   public Products: Product[] = [];
 
-  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication, private cdr: ChangeDetectorRef ) {
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
     this.title.setTitle("Store | Mistox");
 
     // load each product
@@ -28,10 +27,11 @@ export class CatalogComponent {
 
         // Load each image
         this.Products.forEach(item => {
+          item.curShowingIMG = 0;
           item.images.forEach(img => {
             http.get("https://mistox.com/api/productimage/get?ProductID=" + img.productID + "&ImageID=" + img.imageID, { responseType: 'blob' }).subscribe(blob => {
               img.imageSrc = URL.createObjectURL(blob);
-              this.cdr.detectChanges();
+              console.log(img.imageSrc);
             });
           });
         });