Exercise 1: Add sock layout component

itenium-socks/angular.json

@@ -100,5 +100,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

itenium-socks/package.json

@@ -20,6 +20,7 @@
     "@angular/router": "^18.0.0",
     "@fortawesome/angular-fontawesome": "^0.15.0",
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "ngx-timeago": "^3.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

itenium-socks/src/app/app.config.ts

@@ -1,13 +1,16 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, DEFAULT_CURRENCY_CODE, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 
 import { routes } from './app.routes';
+import { TimeagoModule } from 'ngx-timeago';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
     provideHttpClient(withFetch()),
+    {provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR' },
+    importProvidersFrom(TimeagoModule.forRoot())
   ]
 };

itenium-socks/src/app/home/latest-socks.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>
-      </div>
+        @for (sock of socks$ | async; track sock.id) {
+          <div class="col-sm-6 col-md-4 col-lg-3">
+            <app-sock-layout [sock]="sock"></app-sock-layout>
+          </div>
+        }
     </div>
     <div class="btn-box">
       <a routerLink="/socks">

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

@@ -2,13 +2,14 @@ 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 { SockLayoutComponent } from '../sock-layout/sock-layout.component';
 
 @Component({
   selector: 'app-latest-socks',
   standalone: true,
-  imports: [NgFor, AsyncPipe, RouterLink],
+  imports: [AsyncPipe, RouterLink, SockLayoutComponent],
   templateUrl: './latest-socks.component.html'
 })
 export class LatestSocksComponent implements OnInit {

itenium-socks/src/app/sock-layout/sock-layout.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 }}</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/sock-layout/sock-layout.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { Sock } from '../socks/sock.model';
+import { CurrencyPipe } from '@angular/common';
+
+@Component({
+  selector: 'app-sock-layout',
+  standalone: true,
+  imports: [CurrencyPipe],
+  templateUrl: './sock-layout.component.html'
+})
+
+export class SockLayoutComponent {
+    @Input() sock! : 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>
+      @for (sock of socks$ | async; track sock.id) {
+        <div class="col-sm-6 col-md-4 col-lg-3">
+          <app-sock-layout [sock]="sock"></app-sock-layout>
         </div>
-      </div>
+      }
     </div>
   </div>
 </section>

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

@@ -2,12 +2,13 @@ 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 { SockLayoutComponent } from '../sock-layout/sock-layout.component';
 
 @Component({
   selector: 'app-shop',
   standalone: true,
-  imports: [NgFor, AsyncPipe],
+  imports: [AsyncPipe, SockLayoutComponent],
   templateUrl: './shop.component.html'
 })
 export class ShopComponent {

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

@@ -9,15 +9,18 @@ <h2>
   <div class="container px-0">
     <div id="customCarousel2" class="carousel carousel-fade" data-ride="carousel">
       <div class="carousel-inner">
-        <div *ngFor="let review of reviews$ | async; index as i" class="carousel-item {{ i == 0 ? 'active' : '' }}">
+        @for (review of reviews$ | async ; track review) {
+        <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
           <div class="box">
             <div class="client_info">
               <div class="client_name">
                 <h5>
                   {{ review.socksId }}
-                  <i *ngFor="let _ of [].constructor(review.rating)" class="fa fa-star" style="color: gold"></i>
+                  @for (rating of [].constructor(review.rating) ; track rating) {
+                    <i class="fa fa-star" style="color: gold"></i>
+                  }
                 </h5>
-                <h6>On {{ review.added }} by {{ review.email }}</h6>
+                <h6>On {{ review.added | timeago }} by {{ review.email }}</h6>
               </div>
               <i class="fa fa-quote-left" aria-hidden="true"></i>
             </div>
@@ -26,6 +29,7 @@ <h6>On {{ review.added }} by {{ review.email }}</h6>
             </p>
           </div>
         </div>
+      }
       </div>
       <div class="carousel_btn-box">
         <a class="carousel-control-prev" href="#customCarousel2" role="button" data-slide="prev">

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

@@ -1,13 +1,14 @@
-import { AsyncPipe, NgFor } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { SocksService } from './socks.service';
 import { Review } from './sock.model';
+import { TimeagoModule } from 'ngx-timeago';
 
 @Component({
   selector: 'app-sock-reviews',
   standalone: true,
-  imports: [NgFor, AsyncPipe],
+  imports: [AsyncPipe, TimeagoModule ],
   templateUrl: './sock-reviews.component.html'
 })
 export class SockReviewsComponent {

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-layout [sock]="sock"></app-sock-layout>
       </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,11 +3,12 @@ import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
 import { SocksService } from './socks.service';
 import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common';
+import { SockLayoutComponent } from '../sock-layout/sock-layout.component';
 
 @Component({
   selector: 'app-sock',
   standalone: true,
-  imports: [NgIf, AsyncPipe, TitleCasePipe],
+  imports: [NgIf, AsyncPipe, TitleCasePipe, SockLayoutComponent],
   templateUrl: './sock.component.html'
 })
 export class SockComponent {