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"> <dt-key-value-list-key>{{ entry.key }}</dt-key-value-list-key> <dt-key-value-list-value>{{ entry.value }}</dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> export class DefaultKeyValueListExampleComponent { entries: Array<{key: string; value: string}> = [ { 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' }, ]; } {{ entry.key }} {{ entry.value }} export class DefaultKeyValueListExampleComponent { entries: Array<{key: string;="" value:="" string}=""> = [ { 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"> <strong dtKeyValueListKey>{{ entry.key }}</strong> <samp dtKeyValueListValue>{{ entry.value }}</samp> </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' }, ]; } {{ entry.key }} {{ entry.value }} 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"> <dt-key-value-list-key>{{ entry.key }}</dt-key-value-list-key> <dt-key-value-list-value>{{ entry.value }}</dt-key-value-list-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' }, ]; } {{ entry.key }} {{ entry.value }} 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' }, ]; }

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. Every list item contains a <dt-key-value-list-key> followed by a <dt-key-value-list-value>. Use the following tags to define the list and its items.

  • The <dt-key-value-list> tag itself to create the component,
  • the <dt-key-value-list-item> to create a separate entry for each item,
  • the <dt-key-value-list-key> or [dt-key-value-list-key] or [dtKeyValueListKey] to define the item's key (left label) to be displayed and
  • the <dt-key-value-list-value> or [dt-key-value-list-value] or [dtKeyValueListValue] to define the items value (right label) to be displayed.

Only use text with basic inline markup and links as content of key and value elements.

Examples

Single column

´ Loading interactive demo...
<dt-key-value-list> <dt-key-value-list-item *ngFor="let entry of entries"> <dt-key-value-list-key>{{ entry.key }}</dt-key-value-list-key> <dt-key-value-list-value>{{ entry.value }}</dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> export class DefaultKeyValueListExampleComponent { entries: Array<{key: string; value: string}> = [ { 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' }, ]; } {{ entry.key }} {{ entry.value }} export class DefaultKeyValueListExampleComponent { entries: Array<{key: string;="" value:="" string}=""> = [ { 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"> <strong dtKeyValueListKey>{{ entry.key }}</strong> <samp dtKeyValueListValue>{{ entry.value }}</samp> </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' }, ]; } {{ entry.key }} {{ entry.value }} 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"> <dt-key-value-list-key>{{ entry.key }}</dt-key-value-list-key> <dt-key-value-list-value>{{ entry.value }}</dt-key-value-list-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' }, ]; } {{ entry.key }} {{ entry.value }} 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' }, ]; }