Getting Started with Ionic Framework: A Step-by-Step Tutorial with Examples

Published by

on

IONIC Framework

Here’s a beginner-friendly tutorial on building a simple mobile app using the Ionic framework. In this tutorial, we’ll create a basic “To-Do List” app to demonstrate the core concepts of Ionic.

Prerequisites:

  • Node.js and npm installed on your computer.
  • Knowledge of Anuglar

Step 1: Install Ionic CLI:
Open your terminal and install the Ionic CLI globally by running:

npm install -g @ionic/cli

Step 2: Create a New Ionic Project:
Navigate to the directory where you want to create your project and run:

ionic start TodoApp blank

Replace TodoApp with your desired project name.

Step 3: Navigate to the Project:
Navigate into the newly created project folder:

cd TodoApp

Step 4: Create a To-Do Page:
Generate a new page named todo using Ionic CLI:

ionic generate page todo

Step 5: Design the UI:
Open src/app/todo/todo.page.html and replace its content with the following:

<ion-header>
  <ion-toolbar>
    <ion-title>To-Do List</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let task of tasks">
      {{ task }}
    </ion-item>
  </ion-list>
</ion-content>

Step 6: Implement the Logic:
Open src/app/todo/todo.page.ts and update it as follows:

import { Component } from '@angular/core';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.page.html',
  styleUrls: ['./todo.page.scss'],
})
export class TodoPage {
  tasks: string[] = [];

  addTask(task: string) {
    if (task.trim() !== '') {
      this.tasks.push(task);
    }
  }
}

Step 7: Add Input Field:
Open src/app/todo/todo.page.html and add an input field and a button below the task list:

<!-- ...existing code... -->

<ion-content>
  <ion-list>
    <ion-item *ngFor="let task of tasks">
      {{ task }}
    </ion-item>
  </ion-list>

  <ion-item>
    <ion-input [(ngModel)]="newTask" placeholder="New Task"></ion-input>
    <ion-button (click)="addTask(newTask)">Add</ion-button>
  </ion-item>
</ion-content>

Step 8: Styling (Optional):
You can add styling to your app by editing the src/app/todo/todo.page.scss file.

Step 9: Serve the App:
Run the following command to serve your app in the browser:

ionic serve

Your app will be accessible at http://localhost:8100.


Congratulations! You’ve built a simple To-Do List app using Ionic. This tutorial covered the basic steps of creating an Ionic project, generating a page, designing the UI, implementing logic, and running the app. Ionic provides a powerful framework for creating cross-platform mobile applications using familiar web technologies. As you become more comfortable with Ionic, you can explore more advanced features and functionalities to create more complex apps on official site.