Sockcard, currencyPipe & @for

itenium-socks/package.json

@@ -28,6 +28,7 @@
     "@angular-devkit/build-angular": "^18.0.1",
     "@angular/cli": "^18.0.1",
     "@angular/compiler-cli": "^18.0.0",
+    "@angular/localize": "^18.0.0",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",

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

@@ -22,7 +22,7 @@ <h2>
         <th scope="row">{{ sock.name }}</th>
         <td>{{ sock.variant | titlecase }}</td>
         <td [style.color]="sock.color">{{ sock.color }}</td>
-        <td style="text-align: right;">{{ sock.price | currency }}</td>
+        <td style="text-align: right;">{{ sock.price | currency:'EUR':'symbol':'.2':'nl-BE' }}</td>
         <td>{{ sock.inventory }}</td>
         <td>
           <i class="fa fa-trash" (click)="deleteSock(sock.id)"></i>

itenium-socks/src/app/home/latest-socks.component.html

@@ -6,27 +6,16 @@ <h2>
       </h2>
     </div>
     <div class="row">
-      <div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let sock of socks$ | async">
-        <div class="box">
-          <a href="/socks/{{ sock.id }}">
-            <div class="img-box">
-              <img src="sock-images/Socks-{{ sock.brand }}-{{ sock.variant }}.png" />
-            </div>
-            <div class="detail-box">
-              <h6>{{ sock.name }}</h6>
-              <h6><span>{{ sock.price }}</span></h6>
-            </div>
-            <div class="new">
-              <span class="favourite" [style.color]="sock.color"><i class="fa fa-star"></i></span>
-            </div>
-          </a>
-        </div>
+      @for (sock of socks$ | async; track sock.id) {
+      <div class="col-sm-6 col-md-4 col-lg-3">
+        <app-sock-card [sock]="sock"></app-sock-card>
       </div>
+      }
     </div>
     <div class="btn-box">
       <a routerLink="/socks">
         View All Socks
       </a>
     </div>
   </div>
-</section>
+</section>

itenium-socks/src/app/home/latest-socks.component.ts

@@ -2,14 +2,15 @@ import { Component, OnInit } from '@angular/core';
 import { SocksService } from '../socks/socks.service';
 import { Observable } from 'rxjs';
 import { Sock } from '../socks/sock.model';
-import { AsyncPipe, NgFor } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { RouterLink } from '@angular/router';
+import { SockCardComponent } from "../socks/sock-card/sock-card.component";
 
 @Component({
-  selector: 'app-latest-socks',
-  standalone: true,
-  imports: [NgFor, AsyncPipe, RouterLink],
-  templateUrl: './latest-socks.component.html'
+    selector: 'app-latest-socks',
+    standalone: true,
+    imports: [AsyncPipe, RouterLink, SockCardComponent],
+    templateUrl: './latest-socks.component.html'
 })
 export class LatestSocksComponent implements OnInit {
   socks$!: Observable<Sock[]>;

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

@@ -6,22 +6,11 @@ <h2>
       </h2>
     </div>
     <div class="row">
-      <div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let sock of socks$ | async">
-        <div class="box">
-          <a href="/socks/{{ sock.id }}">
-            <div class="img-box">
-              <img src="sock-images/Socks-{{ sock.brand }}-{{ sock.variant }}.png" />
-            </div>
-            <div class="detail-box">
-              <h6>{{ sock.name }}</h6>
-              <h6><span>{{ sock.price }}</span></h6>
-            </div>
-            <div class="new">
-              <span class="favourite" [style.color]="sock.color"><i class="fa fa-star"></i></span>
-            </div>
-          </a>
-        </div>
+      @for (sock of socks$ | async; track sock.id) {
+      <div class="col-sm-6 col-md-4 col-lg-3">
+        <app-sock-card [sock]="sock"></app-sock-card>
       </div>
+      }
     </div>
   </div>
-</section>
+</section>

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

@@ -2,13 +2,14 @@ import { Component } from '@angular/core';
 import { SocksService } from './socks.service';
 import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
-import { AsyncPipe, NgFor } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
+import { SockCardComponent } from "./sock-card/sock-card.component";
 
 @Component({
-  selector: 'app-shop',
-  standalone: true,
-  imports: [NgFor, AsyncPipe],
-  templateUrl: './shop.component.html'
+    selector: 'app-shop',
+    standalone: true,
+    imports: [AsyncPipe, SockCardComponent],
+    templateUrl: './shop.component.html'
 })
 export class ShopComponent {
   socks$!: Observable<Sock[]>;

itenium-socks/src/app/socks/sock-card/sock-card.component.html

@@ -0,0 +1,14 @@
+<div class="box">
+    <a href="/socks/{{ sock.id }}">
+      <div class="img-box">
+        <img src="sock-images/Socks-{{ sock.brand }}-{{ sock.variant }}.png" />
+      </div>
+      <div class="detail-box">
+        <h6>{{ sock.name }}</h6>
+        <h6><span>{{ sock.price | currency:'EUR':'symbol':'.2':'nl-BE' }}</span></h6>
+      </div>
+      <div class="new">
+        <span class="favourite" [style.color]="sock.color"><i class="fa fa-star"></i></span>
+      </div>
+    </a>
+  </div>

itenium-socks/src/app/socks/sock-card/sock-card.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input} from '@angular/core';
+import {Sock} from '../sock.model';
+import {CurrencyPipe} from '@angular/common';
+
+@Component({
+  selector: 'app-sock-card',
+  standalone: true,
+  imports: [CurrencyPipe],
+  templateUrl: './sock-card.component.html'
+})
+export class SockCardComponent {
+  @Input({required:true}) sock!: Sock;
+
+}

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

@@ -17,18 +17,7 @@
   <div class="container">
     <div class="row">
       <div class="col-sm-6 col-md-6 col-lg-6">
-        <div class="box">
-          <div class="img-box">
-            <img src="/sock-images/Socks-{{ sock.brand }}-{{ sock.variant }}.png" />
-          </div>
-          <div class="detail-box">
-            <h6>{{ sock.name }}</h6>
-            <h6><span>€</span><span>{{ sock.price }}</span></h6>
-          </div>
-          <div class="new">
-            <span class="favourite" [style.color]="sock.color"><i class="fa fa-star"></i></span>
-          </div>
-        </div>
+        <app-sock-card [sock]="sock"></app-sock-card>
       </div>
       <div class="col-sm-6 col-md-6 col-lg-6">
         <h1 style="margin-top: 25px;">{{ sock.name }}</h1>

itenium-socks/src/app/socks/sock.component.ts

@@ -3,12 +3,13 @@ import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
 import { SocksService } from './socks.service';
 import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common';
+import { SockCardComponent } from "./sock-card/sock-card.component";
 
 @Component({
-  selector: 'app-sock',
-  standalone: true,
-  imports: [NgIf, AsyncPipe, TitleCasePipe],
-  templateUrl: './sock.component.html'
+    selector: 'app-sock',
+    standalone: true,
+    imports: [NgIf, AsyncPipe, TitleCasePipe, SockCardComponent],
+    templateUrl: './sock.component.html'
 })
 export class SockComponent {
   sock$!: Observable<Sock>;

itenium-socks/src/main.ts

@@ -1,6 +1,9 @@
+/// <reference types="@angular/localize" />
+
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
+import '@angular/common/locales/global/nl';
 
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));

itenium-socks/tsconfig.app.json

@@ -3,7 +3,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "@angular/localize"
+    ]
   },
   "files": [
     "src/main.ts"

itenium-socks/tsconfig.spec.json

@@ -4,7 +4,8 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "jasmine",
+      "@angular/localize"
     ]
   },
   "include": [