diff --git a/src/app/e-services/e-services.component.html b/src/app/e-services/e-services.component.html
index 5a4f256..86364bd 100644
--- a/src/app/e-services/e-services.component.html
+++ b/src/app/e-services/e-services.component.html
@@ -61,4 +61,8 @@
+
+
+
\ No newline at end of file
diff --git a/src/app/e-services/e-services.component.ts b/src/app/e-services/e-services.component.ts
index 093d6d8..ecd0879 100644
--- a/src/app/e-services/e-services.component.ts
+++ b/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 {
+ }
}
diff --git a/src/app/key-value-holder/key-value-holder.component.html b/src/app/key-value-holder/key-value-holder.component.html
index dddaf4e..4f50a0e 100644
--- a/src/app/key-value-holder/key-value-holder.component.html
+++ b/src/app/key-value-holder/key-value-holder.component.html
@@ -1 +1,6 @@
-key-value-holder works!
+
+ -
+
+
{{ keyValue.value }}
+
+
\ No newline at end of file
diff --git a/src/app/key-value-holder/key-value-holder.component.scss b/src/app/key-value-holder/key-value-holder.component.scss
index e69de29..f041ca2 100644
--- a/src/app/key-value-holder/key-value-holder.component.scss
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/key-value-holder/key-value-holder.component.ts b/src/app/key-value-holder/key-value-holder.component.ts
index 9b7bea8..ed13b83 100644
--- a/src/app/key-value-holder/key-value-holder.component.ts
+++ b/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 {
+ }
}