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

Published by


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.


  • 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/ and replace its content with the following:

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

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

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

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

  selector: 'app-todo',
  templateUrl: './',
  styleUrls: ['./'],
export class TodoPage {
  tasks: string[] = [];

  addTask(task: string) {
    if (task.trim() !== '') {

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

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

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

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

Step 8: Styling (Optional):
You can add styling to your app by editing the src/app/todo/ 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.