GICT knowledge base

Get Started with Ionic Angular – Build Your First App in Minutes

Published 3 September 2025

Are you ready to dive into mobile app development but don’t want to learn completely new programming languages? Ionic Angular might be exactly what you’re looking for! This powerful framework lets you build stunning mobile apps using the web technologies you already know.

What Makes Ionic Angular Special?

Imagine writing your app once and having it work perfectly on iOS, Android, and the web. That’s the magic of Ionic Angular! It combines Angular’s robust framework with Ionic’s beautiful, mobile-optimized UI components to create apps that look and feel truly native.

The best part? If you already know Angular, you’re halfway there. If you’re new to Angular, don’t worry – we’ll walk through everything step by step.

Before We Start Building

Let’s make sure you have everything ready for this exciting journey. You’ll need:

Node.js (version 14 or higher)
A code editor like Visual Studio Code
Basic knowledge of HTML, CSS, and JavaScript

Quick check to see if Node.js is installed:

node --version
npm --version

If you see version numbers, you’re good to go! If not, head over to nodejs.org and install the latest version.

Setting Up Your Development Environment

First things first – let’s install the Ionic CLI (Command Line Interface). This tool will be your best friend throughout the development process.

npm install -g @ionic/cli

Once installed, verify everything is working:

ionic --version

Seeing a version number? Perfect! You’re officially ready to start building.

Creating Your Very First Ionic Angular App

This is where the magic begins! Let’s create your first app:

ionic start myFirstApp blank --type=angular
cd myFirstApp

The blank template gives you a clean slate to work with. There are other templates too:

blank – Perfect for beginners
tabs – Great for apps with multiple sections
sidemenu – Ideal for apps with navigation menus

Now, let’s see your app in action:

ionic serve

Your browser should automatically open, showing your brand new Ionic Angular app. How cool is that?

Understanding Your App’s Structure

Let’s take a quick tour of what Ionic created for you:

src/
├── app/
│   ├── home/              # Your home page
│   ├── app.component.ts   # Main app component
│   ├── app.module.ts      # App configuration
│   └── app-routing.module.ts # Navigation setup
├── assets/                # Images and files
└── theme/                 # Styling and colors

Think of this like the blueprint of your house – each folder has its specific purpose.

Building Your First Interactive Page

Let’s make your home page more interesting! Open src/app/home/home.page.html and replace the content with:

<ion-header>
  <ion-toolbar>
    <ion-title>My Awesome App</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="welcome-container">
    <h1>Welcome to Mobile Development!</h1>
    <p>{{ message }}</p>
    
    <ion-button expand="block" (click)="showMessage()">
      Say Hello!
    </ion-button>
    
    <ion-button expand="block" color="secondary" routerLink="/about">
      Learn More
    </ion-button>
  </div>
</ion-content>

Now update the logic in src/app/home/home.page.ts:

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  message = 'Click the button to get started!';

  showMessage() {
    this.message = 'Hello! Welcome to Ionic Angular! 🚀';
  }

  constructor() {}
}

Save your files and watch the magic happen in your browser!

Adding Navigation Between Pages

Most apps have multiple screens. Let’s create an “About” page:

ionic generate page about

This command creates everything you need for a new page and even updates your app’s routing automatically. Let’s customize the about page:

<!-- src/app/about/about.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>About</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="about-container">
    <ion-card>
      <ion-card-header>
        <ion-card-title>About This App</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        This is my first Ionic Angular app! I'm learning how to build 
        amazing mobile applications using web technologies.
      </ion-card-content>
    </ion-card>

    <ion-button expand="block" routerLink="/home">
      Back to Home
    </ion-button>
  </div>
</ion-content>

Building a Simple Todo List App

Let’s create something more practical – a todo list! First, generate a new page:

ionic generate page todo

Here’s your complete todo app:

src/app/todo/todo.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>My Todo List</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="todo-container">
    <!-- Add new todo -->
    <ion-item>
      <ion-label position="floating">What needs to be done?</ion-label>
      <ion-input 
        [(ngModel)]="newTodo" 
        (keyup.enter)="addTodo()">
      </ion-input>
    </ion-item>
    
    <ion-button 
      expand="block" 
      (click)="addTodo()" 
      [disabled]="!newTodo?.trim()">
      Add Todo
    </ion-button>

    <!-- Todo list -->
    <ion-list *ngIf="todos.length > 0">
      <ion-item-sliding *ngFor="let todo of todos; let i = index">
        <ion-item>
          <ion-checkbox 
            slot="start" 
            [(ngModel)]="todo.completed">
          </ion-checkbox>
          <ion-label [class.completed]="todo.completed">
            {{ todo.text }}
          </ion-label>
        </ion-item>
        
        <ion-item-options slot="end">
          <ion-item-option color="danger" (click)="removeTodo(i)">
            Delete
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>

    <div *ngIf="todos.length === 0" class="empty-state">
      <p>No todos yet! Add one above to get started.</p>
    </div>
  </div>
</ion-content>

src/app/todo/todo.page.ts:

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

interface Todo {
  text: string;
  completed: boolean;
}

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

  addTodo() {
    if (this.newTodo?.trim()) {
      this.todos.push({
        text: this.newTodo.trim(),
        completed: false
      });
      this.newTodo = '';
    }
  }

  removeTodo(index: number) {
    this.todos.splice(index, 1);
  }

  constructor() {}
}

src/app/todo/todo.page.scss:

.todo-container {
  padding: 16px;
}

.completed {
  text-decoration: line-through;
  opacity: 0.6;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  opacity: 0.6;
}

Don’t forget to add FormsModule to your todo module for ngModel to work!

Making Your App Beautiful

Ionic makes styling easy with CSS custom properties. Let’s customize your app’s colors in src/theme/variables.css:

:root {
  --ion-color-primary: #3880ff;
  --ion-color-primary-shade: #3171e0;
  --ion-color-secondary: #3dc2ff;
  --ion-color-success: #2fdf75;
  --ion-color-warning: #ffc409;
  --ion-color-danger: #eb445a;
}

Add some custom styles to make your pages pop:

// In your page.scss files
.welcome-container, .about-container, .todo-container {
  padding: 20px;
}

ion-button {
  margin: 8px 0;
}

ion-card {
  margin: 16px 0;
}

Adding Data Persistence

Let’s make your todos persist between app sessions. First, install Ionic Storage:

npm install @ionic/storage-angular

Update your app.module.ts:

import { IonicStorageModule } from '@ionic/storage-angular';

@NgModule({
  imports: [
    // ... other imports
    IonicStorageModule.forRoot()
  ],
})
export class AppModule {}

Create a data service:

ionic generate service services/todo

src/app/services/todo.service.ts:

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage-angular';

@Injectable({
  providedIn: 'root'
})
export class TodoService {
  private storageKey = 'todos';

  constructor(private storage: Storage) {
    this.init();
  }

  async init() {
    await this.storage.create();
  }

  async saveTodos(todos: any[]) {
    await this.storage.set(this.storageKey, todos);
  }

  async loadTodos() {
    return await this.storage.get(this.storageKey) || [];
  }
}

Testing on Real Devices

Ready to see your app on a real phone? Let’s set it up:

# Add platforms
ionic capacitor add ios
ionic capacitor add android

# Build your app
ionic build

# Sync with native projects
ionic capacitor sync

# Open in native IDEs
ionic capacitor open ios      # Opens Xcode
ionic capacitor open android  # Opens Android Studio

Adding Native Features

Want to add camera functionality? Here’s how:

npm install @capacitor/camera

Use it in your component:

import { Camera, CameraResultType } from '@capacitor/camera';

async takePicture() {
  try {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Uri
    });
    
    // Use the image
    console.log('Image saved to:', image.webPath);
  } catch (error) {
    console.error('Error taking picture:', error);
  }
}

Essential Ionic CLI Commands

Here are the commands you’ll use most often:

# Development
ionic serve                    # Start dev server
ionic serve --lab            # Preview on multiple platforms

# Generate components
ionic generate page name       # Create new page
ionic generate service name    # Create service
ionic generate component name  # Create component

# Building
ionic build                   # Build for web
ionic build --prod           # Production build

# Native development
ionic capacitor run ios       # Run on iOS device
ionic capacitor run android   # Run on Android device

# Maintenance
ionic doctor                  # Check for issues
ionic info                   # Show project info

Troubleshooting Common Issues

Build errors? Try this:

npm install
ionic clean
ionic build

Capacitor issues? Sync your project:

ionic capacitor sync

Node modules problems? Reset everything:

rm -rf node_modules package-lock.json
npm install

What’s Next?

Congratulations! You’ve just built your first Ionic Angular app. Here’s what you can explore next:

Immediate Next Steps:

Add more pages and navigation
Experiment with different Ionic components
Customize your app’s theme and styling
Add form validation and error handling

Advanced Features:

State management with NgRx
Push notifications
Offline capabilities
Native device features (GPS, contacts, etc.)
Unit and end-to-end testing

Deployment:

Publish to Google Play Store
Submit to Apple App Store
Deploy as a Progressive Web App

Resources to Keep Learning

Official Documentation: ionicframework.com/docs
Angular Guide: angular.io
Capacitor Docs: capacitorjs.com
Ionic Community: Join the forum for help and inspiration

Final Thoughts

Building mobile apps doesn’t have to be intimidating. With Ionic Angular, you can leverage your existing web development skills to create professional, native-quality mobile applications.

Start small, experiment often, and don’t be afraid to break things – that’s how you learn! The combination of Angular’s powerful features and Ionic’s beautiful components gives you everything you need to build amazing apps.

Related guides

Angular.js

Your bag