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 the pizza ordering component:

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

Getting ready

This app example could work either in a browser or in 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 --v2
   $ cd MyComponent
   

2. Open the ./app/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...