Forward Advance Learning

Lists

Ionic allows us to create beautiful lists of items from a data source. We use an ng-for to repeat the list of items.

Here is a component that creates a list of cats:

import {Component} from '@angular/core';
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
cats: Array<any>;
constructor() {
this.cats = [
'Lemmy',
'Hammy',
'Fluff Star Alpha',
'Francis Chemungleton the fifth'
]
}
}

We then iterate over this list using the ion-list component and a regular old ng-for:

<ion-list>
<ion-item *ngFor="let cat of cats">
{{cat}}
</ion-item>
</ion-list>

Styling Options

There are a series of CSS styling options available to us, to add icons, checkboxes or avatars to the list. Read more here: http://ionicframework.com/docs/v2/components/#lists

Exercise - Thundercats are Go!

In your exercise folder, you'll find a service containing a list of thundercats, and a folder of images.

Inject the service into your app.js, then pull the data out into your home.ts.

Use whatever stying options seem approprate to you to create a simple thundercats app, which shows a scrollable list of images.

Big Extension - deploy to an Android phone

If you have an Android device, plug it in to your laptop.

Put it into developer mode by going to settings > About phone > Build number, then clicking build number seven times.

Make sure you have the drivers installed for your device. If you have an HTC phone, install the HTC drivers for example.

Now run:

ionic run android --device

Provided your phone is connected and set up properly, the app should deploy onto your phone.