Solution for lab #15

src/app/currency-renderer.pipe.ts

@@ -1,14 +1,19 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import {CurrencyPipe, DecimalPipe} from '@angular/common';
+import {CurrencyService} from './currency-switcher/currency.service';
 
 @Pipe({
-  name: 'currencyRenderer'
+  name: 'currencyRenderer',
+  pure: false
 })
 export class CurrencyRendererPipe implements PipeTransform {
 
   private format = '1.0-2';
 
-  transform(value: any, currency: string = 'USD', changeRate: number = 1.0): any {
+  constructor(private service: CurrencyService) {}
+
+  transform(value: any, changeRate: number = 1.0): any {
+    const currency = this.service.getCurrency();
     if (currency != 'EUR'){
       return new CurrencyPipe('en-US')
         .transform(value * changeRate, currency, 'symbol', this.format);

src/app/currency-switcher/currency.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { CurrencyService } from './currency.service';
+
+describe('CurrencyService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CurrencyService]
+    });
+  });
+
+  it('should be created', inject([CurrencyService], (service: CurrencyService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/currency-switcher/currency.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import {Currency} from './currency';
+
+@Injectable()
+export class CurrencyService {
+
+  currency: Currency = 'USD';
+
+  setCurrency(currency: Currency) {
+    this.currency = currency;
+  }
+
+  getCurrency(): Currency {
+    return this.currency;
+  }
+}

src/app/license-plate/license-plate.component.html

@@ -2,7 +2,7 @@ <h2>{{plate.title}} <img src="assets/sale.png" class="sale" *ngIf="plate.onSale"
 <img src="{{plate.picture}}" class="img-fluid" >
 <p>{{plate.description}}</p>
 <div>
-  <h2 class="float-left">{{plate.price | currencyRenderer:'EUR': 1.40}}</h2>
+  <h2 class="float-left">{{plate.price | currencyRenderer: 1.40}}</h2>
   <button class="btn btn-primary float-right" role="button" (click)="alert('Plate added to cart')">
     {{buttonText}}
   </button>

src/app/navigation/navigation.component.html

@@ -17,9 +17,11 @@
       </li>
 
     </ul>
+    <app-currency-switcher></app-currency-switcher>
     <form class="form-inline my-2 my-lg-0">
       <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
     </form>
   </div>
+
 </nav>

src/app/navigation/navigation.component.ts

@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.css']
 })
-export class NavigationComponent implements OnInit {
+export class NavigationComponent {
 
   constructor() { }
 
-  ngOnInit() {
-  }
-
 }