Build your first page component with Ionic 2

[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.