Reusing an existing page as an HTML element

So far, we have used Ionic pages using Ionic's navigation system. In this recipe, we're going to extend the existing page so that we can use it as an HTML element/component in the application. The following is the first page of the application:

When you click on SHOW CONTACT PAGE, it shows the contact page with the information from the previous page as shown in the following screenshot:

We will reutilize this contact page as an HTML element in the application.

Getting ready

In this recipe, we are using web functionalities, so we only need a web browser to run the application.

How to do it...

Follow these instructions:

1. Create a new app named PageComponent using the blank template, as shown in the following code block and go to the PageComponent folder:

$ ionic start PageComponent blank
$ cd PageComponent

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

<ion-header>
  <ion-navbar>
    <ion-title&gt...