In this section, we will explore how to create and use pages in an Ionic application. Pages are fundamental building blocks in Ionic apps, allowing you to structure your app into manageable and navigable sections.

1. Pages in Ionic: Pages are individual views or screens in an Ionic application.
2. Generating Pages: Using the Ionic CLI to generate new pages.
3. Navigation: Navigating between pages using Angular's Router.
4. Passing Data: Passing data between pages.

Ionic CLI provides a simple command to generate new pages. This command creates the necessary files and updates the routing configuration.

1. Open your terminal and navigate to your Ionic project directory.

2. Run the following command to generate a new page:

   ionic generate page PageName
   

   Replace PageName with the desired name of your page. For example, to create a page named Details, you would run:

   ionic generate page Details
   

3. Ionic CLI Output: The CLI will create a new folder named details in the src/app directory with the following files:

   • details.page.html: The HTML template for the page.
   • details.page.scss: The SCSS file for styling the page.
   • details.page.ts: The TypeScript file for the page logic.
   • details.page.spec.ts: The spec file for unit testing the page.

This file contains the HTML template for the page. You can define the structure and content of your page here.

This file contains the SCSS styles for the page. You can add custom styles specific to this page.

This file contains the TypeScript logic for the page. It includes the necessary imports and the component decorator.

To navigate between pages, Ionic uses Angular's Router. You can define routes in the app-routing.module.ts file.

1. Open src/app/app-routing.module.ts.

2. Add a new route for the DetailsPage:

   const routes: Routes = [
     {
       path: '',
       loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
     },
     {
       path: 'details',
       loadChildren: () => import('./details/details.module').then(m => m.DetailsPageModule)
     }
   ];
   

You can navigate to the DetailsPage programmatically using Angular's Router.

1. Import the Router in your component:

   import { Router } from '@angular/router';
   

2. Inject the Router in the constructor:

   constructor(private router: Router) { }
   

3. Use the navigate method to navigate to the DetailsPage:

   this.router.navigate(['/details']);
   

You can also use Ionic components like ion-button to navigate between pages.

To pass data between pages, you can use Angular's NavigationExtras.

1. Navigate with Data:

   this.router.navigate(['/details'], {
     queryParams: { id: 123 }
   });
   

2. Retrieve Data in the Target Page:

   import { ActivatedRoute } from '@angular/router';
   
   constructor(private route: ActivatedRoute) { }
   
   ngOnInit() {
     this.route.queryParams.subscribe(params => {
       const id = params['id'];
       console.log(id); // 123
     });
   }
   

1. Generate a new page named Profile.
2. Add a route for the ProfilePage in app-routing.module.ts.
3. Create a button in the HomePage that navigates to the ProfilePage.
4. Pass a username from the HomePage to the ProfilePage and display it.

1. Generate the ProfilePage:

   ionic generate page Profile
   

2. Add the route in app-routing.module.ts:

   const routes: Routes = [
     {
       path: '',
       loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
     },
     {
       path: 'profile',
       loadChildren: () => import('./profile/profile.module').then(m => m.ProfilePageModule)
     }
   ];
   

3. Add a button in home.page.html:

   <ion-button [routerLink]="['/profile']" [queryParams]="{ username: 'JohnDoe' }">Go to Profile</ion-button>
   

4. Retrieve and display the username in profile.page.ts:

   import { ActivatedRoute } from '@angular/router';
   
   constructor(private route: ActivatedRoute) { }
   
   ngOnInit() {
     this.route.queryParams.subscribe(params => {
       const username = params['username'];
       console.log(username); // JohnDoe
     });
   }
   

   Display the username in profile.page.html:

   <ion-header>
     <ion-toolbar>
       <ion-title>Profile</ion-title>
     </ion-toolbar>
   </ion-header>
   
   <ion-content>
     <p>Welcome, {{ username }}</p>
   </ion-content>
   

In this section, we learned how to create and use pages in an Ionic application. We covered generating new pages using the Ionic CLI, navigating between pages using Angular's Router, and passing data between pages. These concepts are fundamental for building structured and navigable Ionic applications. In the next section, we will explore Ionic components in more detail.