Exercise dev prd

itenium-socks/angular.json

@@ -57,7 +57,13 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"
@@ -100,5 +106,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",
+    "locale-codes": "^1.3.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

itenium-socks/src/app/app.component.css

@@ -0,0 +1,6 @@
+#notProdIndicator {
+    position: fixed; 
+    display: inline; 
+    padding:1em; 
+    background-color:lightgreen;
+}

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

@@ -1 +1,4 @@
+<div [hidden]="this.env.production === true" id="notProdIndicator">
+    You are not in production :-)
+</div>
 <router-outlet />

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

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, LOCALE_ID } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { environment } from '../environments/environment';
 
 @Component({
   selector: 'app-root',
@@ -9,4 +10,6 @@ import { RouterOutlet } from '@angular/router';
   ],
   templateUrl: './app.component.html',
 })
-export class AppComponent {}
+export class AppComponent {
+  public env = environment;
+}

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

@@ -1,4 +1,4 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideZoneChangeDetection, LOCALE_ID } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 
@@ -9,5 +9,6 @@ export const appConfig: ApplicationConfig = {
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
     provideHttpClient(withFetch()),
+    { provide: LOCALE_ID, useValue: 'nl-BE' }
   ]
 };

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

@@ -14,7 +14,7 @@ <h2>
             </div>
             <div class="detail-box">
               <h6>{{ sock.name }}</h6>
-              <h6><span>{{ sock.price }}</span></h6>
+              <h6><span>{{ sock.price | currency : 'EUR' }}</span></h6>
             </div>
             <div class="new">
               <span class="favourite" [style.color]="sock.color"><i class="fa fa-star"></i></span>

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

@@ -1,14 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, LOCALE_ID, 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, NgFor, CurrencyPipe } from '@angular/common';
 import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-latest-socks',
   standalone: true,
-  imports: [NgFor, AsyncPipe, RouterLink],
+  imports: [
+    NgFor, 
+    AsyncPipe, 
+    RouterLink,
+    CurrencyPipe
+  ],
   templateUrl: './latest-socks.component.html'
 })
 export class LatestSocksComponent implements OnInit {

itenium-socks/src/environments/environment.development.ts

@@ -0,0 +1,3 @@
+export const environment = {
+    production: false
+};

itenium-socks/src/environments/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+    production: true
+};

itenium-socks/src/main.ts

@@ -1,6 +1,11 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
+import { registerLocaleData } from '@angular/common';
+import localeNlBe from '@angular/common/locales/nl-BE';
+import localeNlBeExtra from '@angular/common/locales/extra/nl-BE'
+
+registerLocaleData(localeNlBe, localeNlBeExtra);
 
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));