We already used multiple Ionic pages in the navigation, so we know that push/pop navigation works. Let's take a closer look at how we define an Ionic Page as follows:

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

You can see that an Ionic page is actually an Angular component, and we already know that we can use components as an HTML element using their selector. In the preceding example, selector of the page is page-contact. So technically we can use the selector in HTML. But it becomes a problem if our page is getting data from the previous page using NavParams. Let's take a look at the constructor of ContactPage, shown in the following code block:

 constructor(public navCtrl: NavController, private params:NavParams) {
     this.user = params.get('user');
 }

In the code, we are getting the user's information from the previous page using Ionic's navigation. So, if we want to use this component as an HTML element, we need to pass this data to the component somehow.

This is where @Input decorator is particularly useful. The @Input decorator allows us to pass data to the component as an input. So, we have @Input() userInput as an input to the component. This userInput has the same value as the user from NavParams shown in the preceding code. The only difference is userInput will have a value when we use the page component as an HTML element and params.get('user') will have a value when we use this component via Navigation Controlller.

The following is the first page of the app:

When the user enters information in the input fields and then clicks on SHOW CONTACT PAGE, it opens the ContactPage, as shown in the following screenshot:

It is important to note that we might not want to show the header bar of the Ionic page when we are using it as an HTML component in other pages. If you take a look at contact.html, you will see that we hide the page's header when we use it as an HTML component, as follows:

<ion-header *ngIf="!userInput">
    <ion-navbar>
        <ion-title>
            Contact Page
        </ion-title>
    </ion-navbar>;
</ion-header>

So, what we are saying is, only show the header when userInput is empty. This userInput is given as input via @Input, as described in the chapter. So, if you take a look at the home.html file, you will add the following code to show ContactPage inside HomePage:

<page-contact [userInput]="user" *ngIf="showContact">
</page-contact>

When we click on the TOGGLE CONTACT COMPONENT, it shows the same Contact Page inside HomePage, as shown in the following screenshot: