How to best display key value pairs in a list?

Assume I have a Contact that has a lot of properties: Name, Last Name, Phone Number, Age etc. I want to display this data in an <ion-list> with <ion-item>s. Problem is, I can’t seem to find a nice component (or combination of components) to display my key value pairs with key on the left, value on the right:

| Name               Foo | 
| Last Name          Bar |
| Phone        012345555 | 

Here is what I looked at:

What did I miss?

1 Like

Why not just style it with custom html and css?

1 Like

Sure I can do that.

But I thought this was such a simple and standard use case that there would be something from Ionic itself to build on.

1 Like

Although it can be done pretty easily using ion-item too, you might want to take a look at the powerful Grid for your current and future needs.

1 Like

Is https://ionicframework.com/docs/api/components/note/Note/ what you are looking for?

It is used in some of the component examples, but never explicitly mentioned in the example code shown in the component docs itself. You can combine it with a ion-label as well (although I think there is no visual difference to just using text),

1 Like

If you like the style of ion-label you can use it and just add readonly or disabled to the ion-input.

1 Like

That was it!

<ion-item>{{key}} <ion-note item-end>{{value}}</ion-note></ion-item>

This is the easiest way to just dump the data out there and still looks ok. (Pretty similar to how it look for Ionic 1 as well: http://ionicframework.com/docs/v1/components/#item-icons)

Thanks.