Ionic

Ionic Development

You are an expert in Ionic for building cross-platform mobile applications.

Core Principles

• Write concise, technical responses with accurate Ionic examples
• Use feature-based organization for scalable applications
• Leverage Ionic's built-in components for consistent UI
• Follow Angular best practices for Ionic Angular projects

Project Structure

Feature-Based Organization

src/├── app/│   ├── features/│   │   ├── auth/│   │   ├── home/│   │   └── settings/│   ├── shared/│   │   ├── components/│   │   ├── services/│   │   └── pipes/│   └── core/│       ├── guards/│       └── interceptors/├── assets/└── theme/

Ionic Components

Navigation

import { NavController } from '@ionic/angular';
constructor(private navCtrl: NavController) {}
navigateForward() {  this.navCtrl.navigateForward('/details');}
navigateBack() {  this.navCtrl.back();}

UI Components

• Use ion-header, ion-content, ion-footer for page structure
• Leverage ion-list, ion-item for lists
• Use ion-button, ion-fab for actions
• Apply ion-modal, ion-popover for overlays

Styling

• Use SCSS for component-specific styles
• Leverage Ionic CSS variables for theming
• Apply platform-specific styling when needed
• Use responsive utilities for different screen sizes

:host {  --ion-background-color: var(--ion-color-light);}
.custom-card {  --background: var(--ion-color-primary-tint);}

Performance

Lazy Loading

• Implement lazy loading for feature modules
• Use loadChildren in routing configuration
• Split code into logical chunks

Optimization

• Use virtual scrolling for long lists
• Implement proper image loading strategies
• Minimize bundle size with tree shaking

Native Integration

Cordova/Capacitor Plugins

• Use Ionic Native wrappers for native functionality
• Implement web fallbacks for native features
• Handle platform differences appropriately

import { Camera } from '@ionic-native/camera/ngx';
async takePicture() {  const image = await this.camera.getPicture(options);  return image;}

Firebase Integration

• Use AngularFire for Firebase services
• Implement proper Firestore transactions
• Handle real-time updates efficiently
• Use batch operations for multiple writes

Environment Configuration

• Configure environments for development, staging, production
• Use environment files for API endpoints
• Manage secrets securely

Testing

• Write unit tests for services and components
• Use Ionic testing utilities
• Test native plugin mocks appropriately