Key value holder component

src/app/e-services/e-services.component.html

@@ -61,4 +61,8 @@
     <app-table 
     [headings]="['A', 'B', 'C']"
     [tableDetails]="[['Val 1', 'Val 2 ', 'Val 3'], ['V1', 'V2', 'V3'], ['A1', 'A2', 'A3']]"></app-table>
+</div>
+
+<div class="key-value-holder">
+    <app-key-value-holder [keyValues]="keyValues"></app-key-value-holder>
 </div>

src/app/e-services/e-services.component.ts

@@ -1,15 +1,38 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-e-services',
-  templateUrl: './e-services.component.html',
-  styleUrls: ['./e-services.component.scss']
+    selector: 'app-e-services',
+    templateUrl: './e-services.component.html',
+    styleUrls: ['./e-services.component.scss']
 })
 export class EServicesComponent implements OnInit {
 
-  constructor() { }
+    keyValues = [{
+        key: 'Receipt Number',
+        value: 'ACRA38293',
+    }, {
+        key: 'ARN',
+        value: 'ARN2021110294038',
+    }, {
+        key: 'EP Reference No.',
+        value: '20910038829384470'
+    }, {
+        key: 'Tax ID',
+        value: 'M9-0C038921',
+    }, {
+        key: 'Paid By',
+        value: 'KOH YA TING',
+    }, {
+        key: 'Payment Date',
+        value: '06/11/2021 11:28:01'
+    }, {
+        key: 'Paid Via',
+        value: 'Net Banking',
+    }];
 
-  ngOnInit(): void {
-  }
+    constructor() { }
+
+    ngOnInit(): void {
+    }
 
 }

src/app/key-value-holder/key-value-holder.component.html

@@ -1 +1,6 @@
-<p>key-value-holder works!</p>
+<ul class="bill-breakup">
+    <li *ngFor="let keyValue of keyValues">
+        <label> {{ keyValue.key }}: </label>
+        <div class="value"> {{ keyValue.value }} </div>
+    </li>                        
+</ul>

src/app/key-value-holder/key-value-holder.component.scss

@@ -0,0 +1,32 @@
+.bill-breakup {    
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    list-style: none;
+
+    li {
+        margin: 1.8rem;
+        width: 100%;
+    }
+
+    label {
+        display: block;
+        color: var(--dark-grey);
+        font-size: 1.6rem;
+        filter: brightness(80%);
+    }
+
+    .value {
+        display: block;
+        color: var(--dark-grey);
+        opacity: 0.8;
+        font-size: 1.6rem;
+        letter-spacing: 0.5px;
+        line-height: 1.6;
+        margin-top: 1rem;
+
+        &.active {
+            color: var(--highlight);
+            font-weight: normal;
+        }
+    }
+}

src/app/key-value-holder/key-value-holder.component.ts

@@ -1,15 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-key-value-holder',
-  templateUrl: './key-value-holder.component.html',
-  styleUrls: ['./key-value-holder.component.scss']
+    selector: 'app-key-value-holder',
+    templateUrl: './key-value-holder.component.html',
+    styleUrls: ['./key-value-holder.component.scss']
 })
 export class KeyValueHolderComponent implements OnInit {
+    @Input() keyValues: Array<{
+        key: string,
+        value: string,
+    }> = [];
 
-  constructor() { }
+    constructor() { }
 
-  ngOnInit(): void {
-  }
+    ngOnInit(): void {
+    }
 
 }