DEV Community

Cover image for Ionic Adding Pages
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Ionic Adding Pages

What is an App without any pages?

Not much right, unless you are the person that made that million-dollar app back in the day.
So today we'll, be looking into adding some pages to our application.

Ionic Generator

Luckily we don't have to create the page and link it manually.
Ionic comes with an awesome generator.
We can easily create a page using the following command.

ionic generate <type> <name>
Enter fullscreen mode Exit fullscreen mode

So for the page:

ionic generate page contact
Enter fullscreen mode Exit fullscreen mode

This generates the page and automatically adds it to our routing file.

Navigation to this Page

So let's create a button on our first tab, which will link to this page.

Open up tab1.page.html and add the following piece of code above <app-explore-container name="Tab 1 page"></app-explore-container>

<div class="button-container">
  <ion-button (click)="goToContact()">Contact</ion-button>
</div>
Enter fullscreen mode Exit fullscreen mode

As you can see we define an ion-button with a click action which we will make in the ts file.

Then we add some SCSS in tab1.page.scss

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
}
Enter fullscreen mode Exit fullscreen mode

Now open then tab1.page.ts file and add the click function:

import {Component} from '@angular/core';
import {NavController} from '@ionic/angular';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  constructor(private navCtrl: NavController) {}

  goToContact() {
    this.navCtrl.navigateForward('contact');
  }
}
Enter fullscreen mode Exit fullscreen mode

We are using the NavController and navigate forward to our contact page. This page is set up in our router by the generator.

Back to home

Of course, we want to be able to go back to our home app with the tabbar.

We can use the following HTML inside contact.page.html

<ion-content>
  <div class="button-container">
    <ion-button (click)="goBack()">Back</ion-button>
  </div>
</ion-content>
Enter fullscreen mode Exit fullscreen mode

Then add the following SCSS to contact.page.scss:

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Then we make the goBack function in contact.page.ts:

import {Component, OnInit} from '@angular/core';
import {NavController} from '@ionic/angular';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.page.html',
  styleUrls: ['./contact.page.scss']
})
export class ContactPage {
  constructor(private navCtrl: NavController) {}

  goBack() {
    this.navCtrl.pop();
  }
}
Enter fullscreen mode Exit fullscreen mode

There you have it, run ionic serve and we should see our contact button on our first tab, and be able to navigate to the contact page and back.

You can view this code on Github.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (0)