Mastering Mobile Application Development with Ionic/

...

/

Wrapping Up

Wrapping Up

Wrap up the case study with a few final changes.

We'll cover the following...

The TabsPage component

All that remains is to cover the actual TabsPage component, which manages the application navigation between the different screens.

Templating

We will only need to make the following adjustments to the HTML for this page component:

  • The headings displayed for each tab.
  • The icons used for each tab.

Let’s open the src/app/tabs/tabs.page.html component template and make those specific changes (highlighted):

Press + to interact
<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="search-outline"></ion-icon>
      <ion-label>Search</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-icon name="bookmark-outline"></ion-icon>
      <ion-label>Saved</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab3">
      <ion-icon name="star-outline"></ion-icon>
      <ion-label>Favorites</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

With these simple amendments in place, we have now come to the end of our development run. All of the pieces we need are in place, including the Ionic page components, services, custom Angular components, and ...