Cheatsheet

// ===== 1) UI primitives — always reach for ionic components =====
<ion-content>                  // safe-area aware scrolling container
<ion-list> + <ion-item>        // list rows
<ion-button>                   // platform-styled button
<ion-input>                    // form input with floating label
<ion-tabs> + <ion-tab-bar>     // bottom tabs
<ion-modal>                    // bottom sheet / fullscreen modal
<ion-toast>                    // transient feedback
<ion-loading>                  // blocking spinner
<ion-alert>                    // platform-native alert dialog
<ion-refresher>                // pull-to-refresh
<ion-infinite-scroll>          // load more on scroll-near-end

// Variant CSS variables (--ion-color-*) let you theme without overrides.

// ===== 2) Navigation (Angular standalone) =====
// app.routes.ts
{ path: '', loadComponent: () => import('./tabs/tabs.page') }
// children for tab routes
// router.navigate(['/products', sku])

// ===== 3) Lifecycle vs framework lifecycle =====
// Angular ngOnInit -> runs once
// Ionic ionViewWillEnter -> every time the page becomes active
// Ionic ionViewDidLeave  -> when navigation leaves the page
// Use Ionic events for: refetching data on focus, scroll restoration

// ===== 4) Capacitor plugins =====
// npm install @capacitor/camera @capacitor/preferences @capacitor/share
// npx cap sync          (after every plugin install)
// import { Camera, CameraResultType } from '@capacitor/camera';
// const photo = await Camera.getPhoto({ resultType: CameraResultType.DataUrl });

// Preferences (key/value)
// import { Preferences } from '@capacitor/preferences';
// await Preferences.set({ key: 'theme', value: 'dark' });
// const { value } = await Preferences.get({ key: 'theme' });

// ===== 5) Native vs web behaviour =====
import { Capacitor } from '@capacitor/core';
if (Capacitor.isNativePlatform()) { /* iOS/Android */ }
if (Capacitor.getPlatform() === 'web') { /* PWA */ }

// ===== 6) Build for native =====
// ionic build --prod
// npx cap sync ios
// npx cap open ios          (launches Xcode)
// xcodebuild + sign or fastlane match for CI

// ionic build --prod
// npx cap sync android
// cd android && ./gradlew bundleRelease

// ===== 7) Live updates (Appflow) =====
// import { LiveUpdates } from '@capacitor/live-updates';
// const result = await LiveUpdates.sync();
// if (result.activeApplicationPathChanged) await LiveUpdates.reload();

// ===== 8) Theme + dark mode =====
// src/theme/variables.scss
// --ion-color-primary: #2563eb;
// @media (prefers-color-scheme: dark) { ... }
// Or per-platform: ion-app.ios { --ion-toolbar-background: white; }

// ===== 9) Forms — Reactive forms in Angular are still the right pick =====
// import { FormBuilder, Validators } from '@angular/forms';
// this.form = this.fb.group({ email: ['', [Validators.required, Validators.email]] });

// ===== 10) Test, build, ship =====
// ng test   (Karma + Jasmine)
// ng e2e    (Cypress recommended via @cypress/schematic)
// fastlane for App Store / Play submission

// ===== 11) Patterns to internalise =====
// - One ion-content per page; do not nest scrollable containers
// - Use ion-button instead of <button> for platform feel
// - Always show a loading state during async work (ion-loading or skeleton)
// - Native plugins: handle 'permission denied' as a first-class state
// - Test on real devices, especially iOS Safari quirks

// ===== 12) Pitfalls =====
// - Nesting scrollable containers (page jumps unpredictably)
// - Skipping 'npx cap sync' after plugin install
// - Storing tokens in localStorage; use Preferences or @capacitor-community/secure-storage
// - Custom CSS overriding theme variables haphazardly
// - Forgetting iOS / Android permission strings in Info.plist / AndroidManifest

// ionic start | serve | build | cap add | sync | open