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:

Creating a custom 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:

Creating a custom pizza ordering component

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-card-header>
      App Homepage
    </ion-card-header>
    <ion-card-content>
      Please start to order your pizza now!
    </ion-card-content>
  </ion-card>

  <my-component></my-component>
</ion-content>

    This is your root page containing <my-component>, which will be defined later.

  3. Open ./app/pages/home/home.ts for editing globally with the following code:
    import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { MyComponent } from '../../components/foo';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    
  }

}

    You simply have to declare MyComponent as a dependency. A component is basically just a directive with a template, assuming you are familiar with the directive concept of Angular 1.

  4. Now, let's create the component by first creating a directive, as illustrated in the following code:
    $ mkdir ./src/components
  5. Create a foo.ts file in the components directory that you just created, as shown in the following code:
    import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: 'foo.html'
})
export class MyComponent {
  public data: any = {myToggle: true};

  constructor() {
  }
  
  isClicked(val) {
    console.log('Vegetarian: ' + val);
  }

}
  6. Create foo.html in the ./src/components folder, as follows:
    <ion-list>
  <ion-item>
    <ion-label>Vegetarian</ion-label>
    <ion-toggle (click)="isClicked(data.myToggle)" [(ngModel)]="data.myToggle"></ion-toggle>
  </ion-item>
  
  <ion-card *ngIf="data.myToggle">
    <ion-card-header>
      I only eat vegetarian foods
    </ion-card-header>

    <ion-list>
      <button ion-item>
        Mushroom
      </button>
      <button ion-item>
        Spinach
      </button>
      <button ion-item>
        Red Peppers
      </button>
    </ion-list>
  </ion-card>
  
  <ion-card *ngIf="!data.myToggle">
    <ion-card-header>
      I love meat
    </ion-card-header>

    <ion-list>
      <button ion-item>
        Beef
      </button>
      <button ion-item>
        Chicken
      </button>
      <button ion-item>
        Sausage
      </button>
    </ion-list>
  </ion-card>
  
</ion-list>
  7. Modify ./src/app/app.module.ts, as illustrated, so that you can declare MyComponent. Observe the following code:
    import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MyComponent } from '../components/foo';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MyComponent
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    MyComponent
  ],
  providers: []
})
export class AppModule {}
  8. Go to your terminal and run the app using the following command:
    $ ionic serve

How it works…

You may wonder why it's necessary to create a component just to toggle a list (of pizza topping options). The answer is that this is just a demonstration of how you can compartmentalize your app using a component. The key things that you have done are as follows:

  • You created a custom component, called <my-component>, which can be used anywhere, including outside your app.
  • The data within your component is completely private. This means that nobody else can access it without calling a method within your component's class.
  • You can add or change behaviors within your component without impacting other areas outside the component.

To create a component, you need to ensure that you import the decorator, as shown, from Angular 2 itself (and not from Ionic 2):

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: 'foo.html'
})

In your component template, everything is local to what is inside the component class. So, you can bind the click event using click, as shown in the following code:

  <ion-item>
    <ion-label>Vegetarian</ion-label>
    <ion-toggle (click)="isClicked(data.myToggle)" [(ngModel)]="data.myToggle"></ion-toggle>
  </ion-item>

Just like Angular 1, you need to use [(ngModel)] to declare that you want data.myToggle to be your model. The [(..)] part is to tell Angular 2 that this is a two-way binding.

There are two lists of pizza toppings. The first one is as follows:

  <ion-card *ngIf="data.myToggle">
    <ion-card-header>
      I only eat vegetarian foods
    </ion-card-header>

    <ion-list>
      <button ion-item>
        Mushroom
      </button>
      <button ion-item>
        Spinach
      </button>
      <button ion-item>
        Red Peppers
      </button>
    </ion-list>
  </ion-card>

The second list of pizza toppings is as shown:

  <ion-card *ngIf="!data.myToggle">
    <ion-card-header>
      I love meat
    </ion-card-header>

    <ion-list>
      <button ion-item>
        Beef
      </button>
      <button ion-item>
        Chicken
      </button>
      <button ion-item>
        Sausage
      </button>
    </ion-list>
  </ion-card>

To toggle the visibility of each list based on the data.myToggle model, you can use *ngIf, which is very similar to ng-if from Angular 1.

See also

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.142.12.170