---name: ionicdescription: Ionic development guidelines for building cross-platform mobile applications with Angular, Cordova, and Firebase integration.---

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