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-header>
  <ion-toolbar>
    <ion-button (click)="goBack()">
      <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
    </ion-button>
    <ion-title>Contact</ion-title>
  </ion-toolbar>
</ion-header>

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

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

@Component({
  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() {
    this.navCtrl.back();
  }

}

For project github link:

github.com/isoguzay