exercise 5 - Templates - No image

Author: jonathanrasquin

itenium-socks/public/images/placeholder.jpg

@@ -27,7 +27,7 @@ <h2>
         <div class="box">
           <a href="/socks/{{ sock.id }}">
             <div class="img-box">
-              <img src="sock-images/Socks-{{ sock.brand }}-{{ sock.variant }}.png" />
+              <img src="sock-images/Socks-{{ sock.brand }}-{{ sock.variant }}.png" (error)="onImageError($event)" />
             </div>
             <div class="detail-box">
               <h6>{{ sock.name }}</h6>

itenium-socks/src/app/socks/shop.component.html

@@ -23,6 +23,8 @@ export class ShopComponent {
   public currentPageSubject = new BehaviorSubject<number>(1);
   public pageSize = 10;
 
+  placeholderImageUrl = 'images/placeholder.jpg';
+
   constructor(private socksService: SocksService) {}
 
   ngOnInit(): void {
@@ -75,4 +77,7 @@ export class ShopComponent {
     this.currentPageSubject.next(page);
   }
 
+  onImageError(event: Event) {
+    (event.target as HTMLImageElement).src = this.placeholderImageUrl;
+  }
 }