Build your first page component with Ionic 2

Mike Hartington
InstructorMike Hartington

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 4 years ago

The simplest way to display data in an app is with a simple listview. This list will go over how items work and how to place certain elements in ion-items position slots.

[00:00] In our main page component, home.ts, let's add some mock data to start working with. This is just some content copied from the random user API. We'll start off by just rendering this content in a simple pre-tag and then pass it through Angular's json filter.

[00:23] A common way to display all of this information is by creating an ordered list, similar to a phone's contact list. We'll start off by adding the ion list tag and inside of that we'll create a single ion item.

[00:39] We could just render out the first name and the last name and call it a day, but Ionic adds a few more components to make the list more interesting. We can start off by creating an ion avatar element inside of our item.

[00:54] Inside of that we can place an image tag and then set its source to the smallest image provided. The last bit we need to add is to tell the avatar if it should go on the left or if it should go on the right. To set this, we'll add itemRight or itemLeft on the element.

[01:13] If an avatar doesn't fit your style you can switch them out for thumbnails, which are squares instead of circles. For our list avatars will do just fine, so we'll switch back to them. We'll move down to the closing ion item tag and add the person's phone number using ion note. Then we'll set the position using the itemRight property.

[01:41] What you may notice is that this list looks very material-design and that's on purpose. For the browser Ionic will default to a material-design look and feel. If we wanted to mimic iOS we could open up a new tab, go to the same URL, and actually attach a gray parameter of ionicplatform=iOS and we would get a very iOS-looking design.

~ 4 years ago

i want to keep the image in my local project folder instead of url. lets say in /assets/imgs. what would be my path in person object

person : {

picture: { large: ?? }


i am not able to get this picture.

~ 4 years ago

ok got it. it was my mistake. i have put down two '..' so it was not picking it up :-)

~ 4 years ago

item-left, item-right is not working as expected. am i missing something.