Creating a custom pizza ordering component

In this section, you will build an app to demonstrate a custom component with its private variables and template. Observe the following screenshot of a pizza ordering component:

The user will not notice which area is part of the page, as opposed to being a self-contained component. Your custom component here is the only area where the list is listening to the Vegetarian check box:

Getting ready

This app example could work either in a browser or on a physical device.

How to do it...

Perform the following instructions:

1. Create a new MyComponent app using the blank template, as shown, and go into the MyComponent folder:

$ ionic start MyComponent blank 
$ cd MyComponent 

2. Open the ./src/pages/home/home.html file and replace the content with the following code:

<ion-header>
  <ion-navbar>
    <ion-title>
      Pizza App
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion...