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 KeyValueListDefaultExample { 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' }, ]; } <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 KeyValueListDefaultExample { 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 KeyValueListMulticolumnExample { 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' }, ]; } <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 KeyValueListMulticolumnExample { 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 KeyValueListLongtextExample { 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' }, ]; } <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 KeyValueListLongtextExample { 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 KeyValueListDefaultExample { 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' }, ]; } <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 KeyValueListDefaultExample { 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 KeyValueListMulticolumnExample { 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' }, ]; } <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 KeyValueListMulticolumnExample { 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 KeyValueListLongtextExample { 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' }, ]; } <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 KeyValueListLongtextExample { 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' }, ]; }