vuejs/vue

Problem with angular pipes (percent, currency, date) ou are prompted to complete the TransactionDetailsComponent component. You only need modify the template part of the component. The purpose of this component is to display the date, amount, currency and charges associated with a transaction, each in a specific format. You must display 3 divs: The "Fee" div (fresh) The id of this div must be fee. It displays the fee associated with the transaction as a percentage: If there are less than 2 digits for the integer part of the percentage value, you must fill in with leading zeros. If there are less than 2 digits in the decimal part, you must fill with zeros to law. If there are more than 3 digits in the decimal part, you must round to 3 digits. We use a point. as a decimal separator. For example 0.031234 is displayed 03.123%. The "Amount" div The id of this div should be amount. It displays the charge amount and the currency currency of the transaction. the currency symbol associated with the currency code (for example € for EUR) is displayed before the charges. The fees are formatted as follows: If there are less than 9 digits for the whole part, you must fill with leading zeros. the thousands separator must be a comma,. If there are less than 2 digits in the decimal part, you must fill with leading zeros. If there are more than 2 digits in the decimal part, you must round with 2 digits. For example currency = EUR, amount = 312.562 is displayed € 000,000,312.56. The "Time" div (date) The id of this div must be time. The date and time of the transaction must be displayed in this format unusual: 'ww: yyyy MMMMM dd hh-mm-ss' Notes: A "Preview" block is available to allow you to debug your code. It displays your component below. You can open this block and modify it as you like. The "Preview" block is not taken into account in the calculation of the score of your code.

This is my code : my code does not work correctly

1 // Angular 8.x code

2 import { Component, Input, NgModule } from '@angular/core';
3 import { CommonModule } from '@angular/common';
4
5 @Component({
6 selector:'transaction-component',
7 template: 8 <div id="fee"> 9 {{fee | percent : '2.2-3'}} 10 </div> 11 <div id="amount"> 12 {{amount | currency : currency :'symbol' : '9.2-2'}} 13 </div> 14 <div id="time"> 15 {{timeOfTransaction | date : 'ww: yyyy MMMMM dd hh-mm-ss'}} 16 </div> 17
18 })
19 export class TransactionDetailsComponent {
20
21 @Input()
22 public currency: string;
23
24 @Input()
25 public timeOfTransaction: Date;
26
27 @Input()
28 public amount: number;
29
30 @Input()
31 public fee: number;
32
33 }
34
35 // #region Preview
36 @Component({
37 template: <transaction-component [fee]=0.02 [amount]=123.45 [currency]="'EUR'" [timeOfTransaction]='getPresetDate()'></transaction-component>
38 })
39 export class PreviewComponent {
40 public getPresetDate(){
41 return new Date(1997,6,1,12,32);
42 }
43 }
44 // #endregion Preview
45
46 // #region Module declaration - Do not Change
47 @NgModule({
48 imports: [CommonModule],
49 declarations: [PreviewComponent, TransactionDetailsComponent],
50 entryComponents: [PreviewComponent]
51 })
52 export class PreviewModule { }
53 // #endregion Module declaration
my code does not work correctly