Adding new page in ionic

In Ionic, you can add a new page to your app by following these steps:

Method 1: Using the Ionic CLI

  1. Open your terminal and navigate to your Ionic project directory.
  2. Run the command ionic generate page <page-name> to create a new page. For example, ionic generate page login.
  3. This will create a new directory with the page's files, including the HTML, CSS, and TypeScript files.
  4. Open the login.page.html file and add your page's content, such as HTML elements and Angular directives.
  5. Open the login.page.ts file and add your page's logic, such as Angular components and services.
  6. Update the app-routing.module.ts file to add a new route for the new page.

Method 2: Manually creating a new page

  1. Create a new directory in your project's src directory, for example, login.
  2. Inside the login directory, create the following files:
    • login.page.html: the HTML file for the page
    • login.page.css: the CSS file for the page
    • login.page.ts: the TypeScript file for the page
  3. Add your page's content and logic to the respective files.
  4. Update the app-routing.module.ts file to add a new route for the new page.

Adding the new page to the app

  1. Open the app-routing.module.ts file and add a new route for the new page. For example:
    
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginPage } from './login/login.page';

const routes: Routes = [ { path: '', component: TabsPage }, { path: 'login', component: LoginPage } ];

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

2. Update the `app.component.html` file to include a link to the new page. For example:
```html
<ion-app>
  <ion-router-outlet></ion-routerlet>
  <ion-nav [root]="root"></ion-nav>
</ion-app>
  1. Run the command ionic build and ionic serve to build and serve your app.

That's it! You should now have a new page in your Ionic app.