Complete Ionic-Angular tutorial from basic to advance using coding examples

 Creating a complete Ionic-Angular app involves several steps from basic to advanced levels. Below is a step-by-step tutorial that covers key concepts and coding examples for building a complete Ionic-Angular application.


1. Setting Up the Development Environment

Before starting with Ionic and Angular, ensure you have the following installed:

  1. Node.js: Download Node.js
  2. Ionic CLI: Install the Ionic CLI globally by running:
    npm install -g @ionic/cli
  3. Angular CLI: Install Angular CLI globally:

    npm install -g @angular/cli
  4. Visal Studio Code: Download VSCode

2. Creating Your First Ionic-Angular Application

  1. Creating a New Ionic Project

    To create a new Ionic-Angular project, run the following command:

    ionic start myApp blank --type=angular

    This will create a blank Ionic app with Angular. You can choose other templates like tabs or sidemenu.

  2. Navigate to the project directory:

    cd myApp
  3. Serve the application:

    ionic serve

    This will open the app in your default browser. The app should display a blank page with Ionic's default layout.


3. Basic Components in Ionic-Angular

Ionic uses Angular components for structure and functionality. Let’s start with some basic UI components and services.

3.1. Adding a Header with Ionic Components

In src/app/home/home.page.html, add the following:

<ion-header> <ion-toolbar> <ion-title> Welcome to My Ionic App </ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-card> <ion-card-header> <ion-card-title> Hello Ionic </ion-card-title> </ion-card-header> <ion-card-content> This is your first Ionic application! </ion-card-content> </ion-card> </ion-content>
  • <ion-header>: This is the top bar of your application.
  • <ion-card>: A simple content container in Ionic.

3.2. Handling User Input with Forms

You can add forms to collect user input. In home.page.html, create a form:

html
<ion-header> <ion-toolbar> <ion-title> User Form </ion-title> </ion-toolbar> </ion-header> <ion-content> <form (ngSubmit)="onSubmit()"> <ion-item> <ion-label position="floating">Name</ion-label> <ion-input type="text" [(ngModel)]="userName" name="name" required></ion-input> </ion-item> <ion-item> <ion-label position="floating">Email</ion-label> <ion-input type="email" [(ngModel)]="userEmail" name="email" required></ion-input> </ion-item> <ion-button expand="full" type="submit">Submit</ion-button> </form> </ion-content>

In the home.page.ts, define the logic:

import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { userName: string = ''; userEmail: string = ''; constructor() {} onSubmit() { console.log('User Name:', this.userName); console.log('User Email:', this.userEmail); } }

This will display a form with two inputs for the user's name and email. The form submission will log the entered data to the console.


4. Navigation Between Pages

Ionic provides a navigation system for handling different views (pages).

4.1. Creating Multiple Pages

  1. Generate a new page:

    ionic generate page profile
  2. Home Page Navigation to Profile Page:

In home.page.html, add a button to navigate to the Profile page:

html
<ion-button (click)="goToProfile()">Go to Profile</ion-button>

In home.page.ts, implement the navigation logic:

typescript
import { Router } from '@angular/router'; constructor(private router: Router) {} goToProfile() { this.router.navigate(['/profile']); }

4.2. Displaying Data in Profile Page

In profile.page.html, display some dynamic content:

html
<ion-header> <ion-toolbar> <ion-title> Profile Page </ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-card> <ion-card-header> <ion-card-title> Welcome {{ userName }} </ion-card-title> </ion-card-header> <ion-card-content> Your email: {{ userEmail }} </ion-card-content> </ion-card> </ion-content>

In profile.page.ts, get the data passed from the previous page:

typescript
import { ActivatedRoute } from '@angular/router'; export class ProfilePage { userName: string; userEmail: string; constructor(private route: ActivatedRoute) { this.userName = localStorage.getItem('userName'); this.userEmail = localStorage.getItem('userEmail'); } }

Make sure you store the values in local storage when the form is submitted in home.page.ts:

typescript
onSubmit() { localStorage.setItem('userName', this.userName); localStorage.setItem('userEmail', this.userEmail); this.router.navigate(['/profile']); }

5. Handling HTTP Requests (Fetching Data)

5.1. Setup HTTP Client in Angular

  1. Install HTTP Client: Ionic comes with Angular’s HTTP client module out of the box. Just import it in app.module.ts:

    typescript
    import { HttpClientModule } from '@angular/common/http';
  2. Service for Fetching Data:

Generate a service to handle HTTP requests:

ionic generate service api

In api.service.ts, fetch data from a REST API (example with a placeholder API):

typescript
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root', }) export class ApiService { private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; constructor(private http: HttpClient) {} getPosts(): Observable<any[]> { return this.http.get<any[]>(this.apiUrl); } }
  1. Using Service in a Component:

In home.page.ts, fetch data using the service:

import { Component, OnInit } from '@angular/core'; import { ApiService } from '../services/api.service'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage implements OnInit { posts: any[] = []; constructor(private apiService: ApiService) {} ngOnInit() { this.apiService.getPosts().subscribe(data => { this.posts = data; }); } }

In home.page.html, display the fetched data:

html
<ion-header> <ion-toolbar> <ion-title> Posts </ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <ion-item *ngFor="let post of posts"> <ion-label> <h2>{{ post.title }}</h2> <p>{{ post.body }}</p> </ion-label> </ion-item> </ion-list> </ion-content>

6. Advanced Concepts:

6.1. Using Storage for Local Data

Ionic offers the @ionic/storage module for local data storage. It’s ideal for storing user preferences, session data, etc.

  1. Install Storage Plugin:

    bash
    npm install @ionic/storage-angular
  2. Setup Storage in app.module.ts:

    typescript
    import { IonicStorageModule } from '@ionic/storage-angular'; @NgModule({ imports: [ IonicStorageModule.forRoot(), ], }) export class AppModule {}
  3. Using Storage in a Component:

    typescript
    import { Storage } from '@ionic/storage-angular'; constructor(private storage: Storage) {} async saveData() { await this.storage.set('name', 'John'); } async loadData() { const name = await this.storage.get('name'); console.log('Loaded name:', name); }

6.2. Push Notifications

To add Push Notifications, you can use the Firebase Cloud Messaging (FCM) service in your Ionic app.

  1. Install Firebase:

    bash
    ionic cordova plugin add cordova-plugin-firebasex npm install @ionic-native/firebase-x
  2. Enable Push Notifications: Setup Firebase and follow Firebase documentation to link your app and configure push notifications.


Conclusion

This tutorial covers the basics of Ionic-Angular app development, from setting up your environment to building a fully functional app with multiple pages, navigation, forms, HTTP requests, and advanced concepts like local storage and push notifications.

Here’s a quick summary of topics covered:

  1. Setting up Ionic-Angular
  2. Building basic UI components
  3. Handling forms and user input
  4. Navigation between pages
  5. Fetching data from APIs
  6. Using local storage and advanced features like push notifications

You can now continue by adding more advanced features such as authentication (using OAuth or Firebase Auth), integrating third-party APIs, or building a complex job portal or e-commerce app using the foundations laid out in this tutorial.

Comments

Popular posts from this blog

PrimeNG tutorial with examples using frequently used classes

Docker and Kubernetes Tutorials and QnA

Building strong foundational knowledge in frontend development topics