# Ionic Adding Pages

What is an App without any pages?

Not much right, unless you are the person that made that [million-dollar app](https://en.wikipedia.org/wiki/I_Am_Rich) 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.

```bash
ionic generate <type> <name>
```

So for the page:

```bash
ionic generate page contact
```

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>`

```html
<div class="button-container">
  <ion-button (click)="goToContact()">Contact</ion-button>
</div>
```

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`

```css
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
}
```

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

```js
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');
  }
}
```

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`

```html
<ion-content>
  <div class="button-container">
    <ion-button (click)="goBack()">Back</ion-button>
  </div>
</ion-content>
```

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

```css
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
```

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

```js
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();
  }
}
```

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](https://github.com/rebelchris/ionic-app/tree/article/adding-pages).

### 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](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)