CheatSheetsHero

Catalog / Ionic Framework Cheat Sheet

Ionic Framework Cheat Sheet

A comprehensive cheat sheet for the Ionic Framework, covering essential commands, components, and concepts for building cross-platform mobile applications.

Ionic CLI Basics

Project Management

ionic start

Create a new Ionic project.

Example:
ionic start myApp blank --type=angular

ionic serve

Run the app in the browser for development.

Example:
ionic serve --lab (with Ionic Lab)

ionic build

Build the app for a specific platform (e.g., web).

Example:
ionic build --prod (production build)

ionic cordova platform add <platform>

Add a platform (e.g., android, ios) to the project.

Example:
ionic cordova platform add android

ionic cordova run <platform>

Run the app on a connected device or emulator.

Example:
ionic cordova run android

ionic generate <type> <name>

Generate components, pages, services, etc.

Example:
ionic generate component my-component

Configuration

The ionic.config.json file stores project configuration.

Key settings include name, integrations, and type.

Environment variables can be set using .env files and accessed via process.env.

Use ionic config get <property> and ionic config set <property> <value> to manage configuration.

Core Components

Basic UI Elements

<ion-header>

The header of a page.

Contains <ion-toolbar>, <ion-title>, and <ion-buttons>.

<ion-content>

The main content area of a page.

Used for displaying text, images, and other components.

<ion-footer>

The footer of a page.

Used for displaying navigation or additional information.

<ion-button>

A clickable button element.

Supports various styles and sizes.

<ion-input>

A text input field.

Supports different types of input (text, number, email, etc.).

<ion-list>

A container for list items.

Used with <ion-item> and related components.

Navigation

<ion-nav>

A container for managing navigation history.

<ion-router-outlet>

Displays the current page based on the router configuration.

routerLink

Angular directive for navigating to a specific route.

Example:
<ion-button routerLink="/home">Home</ion-button>

NavController

Service for programmatic navigation.

Example:
this.navCtrl.navigateForward('/about');

Ionic Native & Plugins

Working with Native Features

Ionic Native provides a wrapper around Cordova plugins, making them easier to use in Angular projects.

Install plugins via Cordova or Capacitor CLI:

ionic cordova plugin add cordova-plugin-camera
npm install @ionic-native/camera

Import and use plugins in your Angular components:

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

constructor(private camera: Camera) { }

...

const options: CameraOptions = { ... };
this.camera.getPicture(options).then((imageData) => { ... });

Common Plugins

@ionic-native/camera

Access the device camera for taking pictures and videos.

@ionic-native/geolocation

Access the device’s GPS for location information.

@ionic-native/barcode-scanner

Scan barcodes and QR codes.

@ionic-native/splash-screen

Manage the app’s splash screen.

@ionic-native/status-bar

Control the device’s status bar appearance.

@ionic-native/file

Access the device’s file system.

Theming and Styling

CSS Variables (Custom Properties)

Ionic uses CSS variables for theming. You can override these variables to customize the look and feel of your app.

Example:

:root {
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
}

Theme variables are defined in the variables.scss file.

Modes

Ionic supports different modes (MD for Material Design, iOS for iOS style).

The mode is automatically set based on the platform.

You can force a specific mode:

<ion-app mode="md">
  ...
</ion-app>

Global Styles

Global styles can be defined in the global.scss file.

Use CSS classes and selectors to style your components.

Example:

.my-custom-class {
  color: red;
}

<ion-button class="my-custom-class">Click Me</ion-button>
Download PDF