How to Build a Sample Ionic 3 List App

This post will describe step-by-step how to build a sample app with Ionic 3 that will retrieve a list from your database collection.

Create a new Ionic 3 app. From the Apps page, click Create new app > Ionic 3 (beta), give it a name, and click Create.
Import the List service from any existing or newly created Appery.io database collection. Create new > Database Service, select the needed database and check the List service checkbox confirming import.
The subfolder with the corresponding name should now have been added to the Services folder in the Project view tree.
Add a model called SingleItem of type Object and 2 attributes: name and _id. Then, add the Items model of Array type and define it in the following way:
Open Pages and rename Screen1 to List using the “cog” sign.
Under the DESIGN tab, add a List component to the List page and delete the 2nd and 3rd items on the list.
Select the List item and add the property *ngFor=let item of items. Also, set the Text property to {{item.name}}.
Now, add a Button component to the page, select it, and define its Text property as Load List and (click) property as loadList().
Switch to the CODE tab, click Edit internal includes, check your added list service, and save:The service with the corresponding name should now be added under Internal includes.
Add 2 variables: items of type Items and listService of the type of your list service (added to Internal includes). Check the Add DI checkbox for listService.

Finally, add a function, name it loadList, and define it with this JavaScript code:

this.listService.execute({ // change 'MerchandiseDB_New_InStock_list_service' to actual variable name//
    data: {},
    params: {},
    headers: {}
}).subscribe(
    (res: any) => {
        console.log("res = ", res);
        this.items = res;
        console.log(res);
    },
    (err: any) => {
        console.log(err)
    }
)

Voilà!

You can now test your app. To do so, click the arrow button next to the Test menu item. In the drop-down, select Show without frame and click Launch. The page will be loaded. Now, click the Load list button. The list appears loaded with the items from the database:Note: To learn how this app can be modified to search and share data across its pages, proceed with this post.

Blog

Voilà!