Hello Friends,

Today, we will continue with our app-demo. Let’s add a new screen into our app.

How can I add a new page at Ionic 5 ?

Actually, it is very simple. Let’s move for it !

In our terminal line, we ensure under the right file path. Then, there is a command line for a new screen in Ionic 5.

ionic generate page contact

After that command, it creates a new page automatically into the file path.

Now, we add a new page into our application. Let’s add a button tab3 page and this button works for opening contact page.

    <ion-button (click)="goBack()">
      <ion-icon slot="icon-only" name="arrow-back"></ion-icon>

      <ion-label>If you have a question, reach me from here !</ion-label>
    <ion-input type="text" placeholder="Email" [(ngModel)]="contact.email"></ion-input>
    <ion-input type="text" placeholder="Message" [(ngModel)]="contact.content"></ion-input>

  <ion-button expand="full" class="ion-margin" color="primary" (click)="showMessage()">Send Message</ion-button>
import { Component, OnInit } from '@angular/core';
import { AlertController, NavController } from '@ionic/angular';

  selector: 'app-contact',
  templateUrl: './contact.page.html',
  styleUrls: ['./contact.page.scss'],
export class ContactPage implements OnInit {

  contact: Contact = {} as Contact;

  constructor(private alertCtrl: AlertController, private navCtrl: NavController) { }

  ngOnInit() {

  async showMessage() {
    const alert = await this.alertCtrl.create({
      header: 'Contact Message Detail',
      message: 'Email : ' + this.contact.email +  ' Message : ' + this.contact.content,
      buttons: [{
        text: 'Ok'
    await alert.present();

  goBack() {


For project github link: