Modify the template part of an angular component-CodePudding

i have an angular assessment, here it is:

You are asked to complete the TransactionDetailsComponent component. You only need to modify the template part of the component.

The purpose of this component is to display the date, amount, currency, and fees associated with a transaction, each in a specific format.

You must display 3 divs:

The div "fee" (fee)

The id of this div must be fee. It displays the fee fees 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 with zeros on the left
if there are less than 2 digits in the decimal part, you must fill with zeros on the right
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 div "amount" (amount)

The id of this div must be amount. It displays the amount amount and the currency currency of the transaction. The currency symbol associated with the currency code (for example € for EUR) is displayed before the fees. The fees are formatted as follows:

if there are less than 9 digits for the integer part, you must fill with zeros on the left. The thousands separator must be a comma ,
if there are less than 2 digits in the decimal part, you must fill with zeros on the right
if there are more than 2 digits in the decimal part, you must round to 2 digits

For example currency = EUR, amount = 312.562 is displayed €000,000,312.56

The div "Time" (date)

The id of this div should be time.The date and time of the transaction should be displayed in this unusual format:

'yyyy MM dd hh-mm-ss'

Here is the angular code to complete:

//Angular8.x code

import { Component , Input, NgModule } from '@angular/core';
import { CommonModule} from '@angular/common';

@component({
  selector:'transaction-component'
  template: `
  <!--Your code goes here-->
  `
  })
  
  export class TransactionDetailsComponent{
  
    @Input()
    public currency:string;
    
    @Input()
    public timeOfTransaction:Date;
    
    @Input()
    public amount:number;
    
    @Input()
    public fee:number;
}

So i came up with this solution:

//Angular8.x code

    import { Component , Input, NgModule } from '@angular/core';
    import { CommonModule} from '@angular/common';

    @component({
      selector:'transaction-component'
      template: `
      <ng-content *ngIf= "Math.floor(fee) &lt 2" *ngIf="(fee-Math.floor(fee)) &lt 2 *ngIf="(fee-Math.floor(fee)) &gt 3 >
      <div id="fee">
      
      </div>
      <ng-content>
      `
      })
      
      export class TransactionDetailsComponent{
      
        @Input()
        public currency:string;
        
        @Input()
        public timeOfTransaction:Date;
        
        @Input()
        public amount:number;
        
        @Input()
        public fee:number;
}

My solution is incompleted and wrong because i don't know how to express "fill with zeroes at the left" in javascript code or"fill with zeroes at the right". Can you give me a hand please?

CodePudding user response：

Inside ParentComponent.ts

<ng-container *ngFor="let t of transactions">
  <transaction-details
    [currency]="t.currency"
    [fee]="t.fee"
    [amount]="t.amount"
    [timeOfTransaction]="t.timeOfTransaction"
  ></transaction-details>
  <hr />
</ng-container>

TransactionDetailsComponent.ts

  @Input()
  public currency: string;

  @Input()
  public timeOfTransaction: Date;

  @Input()
  public amount: number;

  @Input()
  public fee: number;

Inside TransactionDetailsComponent template, To do transformation we will use CurrencyPipe, DecimalPipe, DatePipe and PercentPipe

<div id="fee">Fee : {{ fee | number | percent: '2.2-3' }}</div>

<div id="amount">
  Amount : {{ amount | currency: currency:'symbol':'9.2-2' }}
</div>

<div id="time">
  Transaction : {{ timeOfTransaction | date: 'yyyy MM dd hh-mm-ss' }}
</div>

Angular Demo