Key-value list

The key-value list is used to visualize properties. The key-value list behaves responsively with a maximum width of 580px.

´ Loading interactive demo...
<dt-key-value-list> <dt-key-value-list-item *ngFor="let entry of entries" [key]="entry.key" [value]="entry.value"></dt-key-value-list-item> </dt-key-value-list> export class DefaultKeyValueListExampleComponent { entries: object[] = [ { key : 'Temp', value : '28C' }, { key : 'Temp1', value : '27C' }, { key : 'Temp2', value : '24C' }, { key : 'Temp3', value : '29C' }, { key : 'Temp4', value : '22C' }, { key : 'Temp5', value : '21C' }, { key : 'Temp6', value : '25C' }, { key : 'Temp7', value : '29C' }, ]; } export class DefaultKeyValueListExampleComponent { entries: object[] = [ { key : 'Temp', value : '28C' }, { key : 'Temp1', value : '27C' }, { key : 'Temp2', value : '24C' }, { key : 'Temp3', value : '29C' }, { key : 'Temp4', value : '22C' }, { key : 'Temp5', value : '21C' }, { key : 'Temp6', value : '25C' }, { key : 'Temp7', value : '29C' }, ]; }

Multiple columns

´ Loading interactive demo...
<dt-key-value-list> <dt-key-value-list-item *ngFor="let entry of entries" [key]="entry.key" [value]="entry.value"></dt-key-value-list-item> </dt-key-value-list> export class MulticolumnKeyValueListExampleComponent { entries: object[] = [ { key : 'Temp', value : '28C' }, { key : 'Temp1', value : '27C' }, { key : 'Temp2', value : '24C' }, { key : 'Temp3', value : '29C' }, { key : 'Temp4', value : '22C' }, { key : 'Temp5', value : '21C' }, { key : 'Temp6', value : '25C' }, { key : 'Temp7', value : '29C' }, { key : 'Temp8', value : '30C' }, { key : 'Temp9', value : '22C' }, { key : 'Temp10', value : '26C' }, { key : 'Temp11', value : '21C' }, { key : 'Temp12', value : '32C' }, { key : 'Temp13', value : '25C' }, { key : 'Temp14', value : '19C' }, { key : 'Temp15', value : '24C' }, { key : 'Temp16', value : '27C' }, { key : 'Temp17', value : '21C' }, { key : 'Temp18', value : '28C' }, { key : 'Temp19', value : '33C' }, { key : 'Temp20', value : '26C' }, ]; } export class MulticolumnKeyValueListExampleComponent { entries: object[] = [ { key : 'Temp', value : '28C' }, { key : 'Temp1', value : '27C' }, { key : 'Temp2', value : '24C' }, { key : 'Temp3', value : '29C' }, { key : 'Temp4', value : '22C' }, { key : 'Temp5', value : '21C' }, { key : 'Temp6', value : '25C' }, { key : 'Temp7', value : '29C' }, { key : 'Temp8', value : '30C' }, { key : 'Temp9', value : '22C' }, { key : 'Temp10', value : '26C' }, { key : 'Temp11', value : '21C' }, { key : 'Temp12', value : '32C' }, { key : 'Temp13', value : '25C' }, { key : 'Temp14', value : '19C' }, { key : 'Temp15', value : '24C' }, { key : 'Temp16', value : '27C' }, { key : 'Temp17', value : '21C' }, { key : 'Temp18', value : '28C' }, { key : 'Temp19', value : '33C' }, { key : 'Temp20', value : '26C' }, ]; }

Multiple lines

´ Loading interactive demo...
<dt-key-value-list> <dt-key-value-list-item *ngFor="let entry of entries" [key]="entry.key" [value]="entry.value"></dt-key-value-list-item> </dt-key-value-list> export class LongtextKeyValueListExampleComponent { entries: object[] = [ { key : 'Hostanem in Amazon AWS Region EU-West 1 (public access)', value : 'ec25217103181.eu-west1.compute.amazon-aws.com' }, { key : 'Hostname (Public)', value : 'ec25217103181.eu-west1.compute.amazon-aws.com' }, { key : 'Hostname (Private)', value : 'ip-1723129141.eu-west-1.compute.internal' }, { key : 'Instance Type', value : 'm3.medium' }, { key : 'Availability Zone', value : 'eu-west-1a' }, { key : 'AMI', value : 'ami-f12ab886' }, { key : 'Virtualization', value : 'Xen' }, { key : 'Instance', value : 'i-53f0d1b7' }, { key : 'Architecture', value : 'x68,64-bit' }, { key : '2. Hostname (Public)', value : 'ec25217103181.eu-west1.compute.amazon-aws.com' }, { key : '2. Hostname (Private)', value : 'ip-1723129141.eu-west-1.compute.internal' }, { key : '2. Instance Type', value : 'm3.medium' }, { key : '2. Availability Zone', value : 'eu-west-1a' }, { key : '2. AMI', value : 'ami-f12ab886' }, { key : '2. Virtualization', value : 'Xen' }, { key : '2. Instance', value : 'i-53f0d1b7' }, { key : '2. Architecture', value : 'x68,64-bit' }, ]; } export class LongtextKeyValueListExampleComponent { entries: object[] = [ { key : 'Hostanem in Amazon AWS Region EU-West 1 (public access)', value : 'ec25217103181.eu-west1.compute.amazon-aws.com' }, { key : 'Hostname (Public)', value : 'ec25217103181.eu-west1.compute.amazon-aws.com' }, { key : 'Hostname (Private)', value : 'ip-1723129141.eu-west-1.compute.internal' }, { key : 'Instance Type', value : 'm3.medium' }, { key : 'Availability Zone', value : 'eu-west-1a' }, { key : 'AMI', value : 'ami-f12ab886' }, { key : 'Virtualization', value : 'Xen' }, { key : 'Instance', value : 'i-53f0d1b7' }, { key : 'Architecture', value : 'x68,64-bit' }, { key : '2. Hostname (Public)', value : 'ec25217103181.eu-west1.compute.amazon-aws.com' }, { key : '2. Hostname (Private)', value : 'ip-1723129141.eu-west-1.compute.internal' }, { key : '2. Instance Type', value : 'm3.medium' }, { key : '2. Availability Zone', value : 'eu-west-1a' }, { key : '2. AMI', value : 'ami-f12ab886' }, { key : '2. Virtualization', value : 'Xen' }, { key : '2. Instance', value : 'i-53f0d1b7' }, { key : '2. Architecture', value : 'x68,64-bit' }, ]; }

Key Value List

This component creates a key value list with Dynatrace styling. It splits the provided elements automatically into 2 columns.

Imports

You have to import the DtKeyValueListModule when you want to use the dt-key-value-list:


@NgModule({
  imports: [
    DtKeyValueListModule,
  ],
})
class MyModule {}

Initialization

Use the Dynatrace key value list <dt-key-value-list> tag in conjunction with the <dt-key-value-list-item> tag.

  • The <dt-key-value-list> tag itself to create the component and
  • The <dt-key-value-list-item> to create a separate entry for each item. The attributes key and value define the labels to be displayed.

Options & Properties

Name Type Default Description
[key] string Gets the key label that should be displayed
[value] string Gets the value label that should be displayed

Examples

Single column

´ Loading interactive demo...
<dt-key-value-list> <dt-key-value-list-item *ngFor="let entry of entries" [key]="entry.key" [value]="entry.value"></dt-key-value-list-item> </dt-key-value-list> export class DefaultKeyValueListExampleComponent { entries: object[] = [ { key : 'Temp', value : '28C' }, { key : 'Temp1', value : '27C' }, { key : 'Temp2', value : '24C' }, { key : 'Temp3', value : '29C' }, { key : 'Temp4', value : '22C' }, { key : 'Temp5', value : '21C' }, { key : 'Temp6', value : '25C' }, { key : 'Temp7', value : '29C' }, ]; } export class DefaultKeyValueListExampleComponent { entries: object[] = [ { key : 'Temp', value : '28C' }, { key : 'Temp1', value : '27C' }, { key : 'Temp2', value : '24C' }, { key : 'Temp3', value : '29C' }, { key : 'Temp4', value : '22C' }, { key : 'Temp5', value : '21C' }, { key : 'Temp6', value : '25C' }, { key : 'Temp7', value : '29C' }, ]; }

Multiple columns

´ Loading interactive demo...
<dt-key-value-list> <dt-key-value-list-item *ngFor="let entry of entries" [key]="entry.key" [value]="entry.value"></dt-key-value-list-item> </dt-key-value-list> export class MulticolumnKeyValueListExampleComponent { entries: object[] = [ { key : 'Temp', value : '28C' }, { key : 'Temp1', value : '27C' }, { key : 'Temp2', value : '24C' }, { key : 'Temp3', value : '29C' }, { key : 'Temp4', value : '22C' }, { key : 'Temp5', value : '21C' }, { key : 'Temp6', value : '25C' }, { key : 'Temp7', value : '29C' }, { key : 'Temp8', value : '30C' }, { key : 'Temp9', value : '22C' }, { key : 'Temp10', value : '26C' }, { key : 'Temp11', value : '21C' }, { key : 'Temp12', value : '32C' }, { key : 'Temp13', value : '25C' }, { key : 'Temp14', value : '19C' }, { key : 'Temp15', value : '24C' }, { key : 'Temp16', value : '27C' }, { key : 'Temp17', value : '21C' }, { key : 'Temp18', value : '28C' }, { key : 'Temp19', value : '33C' }, { key : 'Temp20', value : '26C' }, ]; } export class MulticolumnKeyValueListExampleComponent { entries: object[] = [ { key : 'Temp', value : '28C' }, { key : 'Temp1', value : '27C' }, { key : 'Temp2', value : '24C' }, { key : 'Temp3', value : '29C' }, { key : 'Temp4', value : '22C' }, { key : 'Temp5', value : '21C' }, { key : 'Temp6', value : '25C' }, { key : 'Temp7', value : '29C' }, { key : 'Temp8', value : '30C' }, { key : 'Temp9', value : '22C' }, { key : 'Temp10', value : '26C' }, { key : 'Temp11', value : '21C' }, { key : 'Temp12', value : '32C' }, { key : 'Temp13', value : '25C' }, { key : 'Temp14', value : '19C' }, { key : 'Temp15', value : '24C' }, { key : 'Temp16', value : '27C' }, { key : 'Temp17', value : '21C' }, { key : 'Temp18', value : '28C' }, { key : 'Temp19', value : '33C' }, { key : 'Temp20', value : '26C' }, ]; }

Multiple columns with line breaks

´ Loading interactive demo...
<dt-key-value-list> <dt-key-value-list-item *ngFor="let entry of entries" [key]="entry.key" [value]="entry.value"></dt-key-value-list-item> </dt-key-value-list> export class LongtextKeyValueListExampleComponent { entries: object[] = [ { key : 'Hostanem in Amazon AWS Region EU-West 1 (public access)', value : 'ec25217103181.eu-west1.compute.amazon-aws.com' }, { key : 'Hostname (Public)', value : 'ec25217103181.eu-west1.compute.amazon-aws.com' }, { key : 'Hostname (Private)', value : 'ip-1723129141.eu-west-1.compute.internal' }, { key : 'Instance Type', value : 'm3.medium' }, { key : 'Availability Zone', value : 'eu-west-1a' }, { key : 'AMI', value : 'ami-f12ab886' }, { key : 'Virtualization', value : 'Xen' }, { key : 'Instance', value : 'i-53f0d1b7' }, { key : 'Architecture', value : 'x68,64-bit' }, { key : '2. Hostname (Public)', value : 'ec25217103181.eu-west1.compute.amazon-aws.com' }, { key : '2. Hostname (Private)', value : 'ip-1723129141.eu-west-1.compute.internal' }, { key : '2. Instance Type', value : 'm3.medium' }, { key : '2. Availability Zone', value : 'eu-west-1a' }, { key : '2. AMI', value : 'ami-f12ab886' }, { key : '2. Virtualization', value : 'Xen' }, { key : '2. Instance', value : 'i-53f0d1b7' }, { key : '2. Architecture', value : 'x68,64-bit' }, ]; } export class LongtextKeyValueListExampleComponent { entries: object[] = [ { key : 'Hostanem in Amazon AWS Region EU-West 1 (public access)', value : 'ec25217103181.eu-west1.compute.amazon-aws.com' }, { key : 'Hostname (Public)', value : 'ec25217103181.eu-west1.compute.amazon-aws.com' }, { key : 'Hostname (Private)', value : 'ip-1723129141.eu-west-1.compute.internal' }, { key : 'Instance Type', value : 'm3.medium' }, { key : 'Availability Zone', value : 'eu-west-1a' }, { key : 'AMI', value : 'ami-f12ab886' }, { key : 'Virtualization', value : 'Xen' }, { key : 'Instance', value : 'i-53f0d1b7' }, { key : 'Architecture', value : 'x68,64-bit' }, { key : '2. Hostname (Public)', value : 'ec25217103181.eu-west1.compute.amazon-aws.com' }, { key : '2. Hostname (Private)', value : 'ip-1723129141.eu-west-1.compute.internal' }, { key : '2. Instance Type', value : 'm3.medium' }, { key : '2. Availability Zone', value : 'eu-west-1a' }, { key : '2. AMI', value : 'ami-f12ab886' }, { key : '2. Virtualization', value : 'Xen' }, { key : '2. Instance', value : 'i-53f0d1b7' }, { key : '2. Architecture', value : 'x68,64-bit' }, ]; }