Add new page ionic 3

To add a new page in Ionic 3, you can follow these steps:

Step 1: Create a new page

In your terminal, navigate to your Ionic project directory and run the following command:

ionic generate page <page-name>

Replace <page-name> with the name of your new page (e.g., "home", "about", etc.).

Step 2: Update the app.module.ts file

In the app.module.ts file, add the new page to the declarations and entryComponents arrays:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AboutPage } from '../pages/about/about';

@NgModule({
  declarations: [MyApp, HomePage, AboutPage],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  entryComponents: [HomePage, AboutPage],
  providers: [],
  bootstrap: [MyApp]
})
export class AppModule {}

Step 3: Update the app-routing.module.ts file

In the app-routing.module.ts file, add a new route for the new page:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AboutPage } from '../pages/about/about';

const routes: Routes = [
  {
    path: '',
    component: HomePage
  },
  {
    path: 'about',
    component: AboutPage
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Step 4: Update the app.component.html file

In the app.component.html file, add a new navigation link to the new page:

<ion-navbar>
  <ion-title>My App</ion-title>
  <ion-buttons end>
    <button ion-button (click)="gotoHome()">Home</button>
    <button ion-button (click)="gotoAbout()">About</button>
  </ion-buttons>
</ion-navbar>

<ion-content>
  <ion-router-outlet></ion-router-outlet>
</ion-content>

Step 5: Update the page component

In the new page component (e.g., about/about.component.ts), add the necessary HTML and CSS to render the page:

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

@Component({
  selector: 'page-about',
  templateUrl: 'about.html',
  styleUrls: ['about.css']
})
export class AboutPage {

  constructor(public navCtrl: NavController) {}

}

Step 6: Run the app

Run the app using the following command:

ionic run android

This will launch the app on an Android emulator or device. You should see the new page when you navigate to it using the navigation link.

That's it! You have successfully added a new page to your Ionic 3 app.

NewsBreakers

Add new page ionic 3