Angular Platform Mobile

Build native iOS and Android apps using Angular

Overview

Angular Platform Mobile enables you to build native iOS and Android applications using Angular. Similar to React Native, this platform provides a bridge between Angular components and native mobile views, allowing you to write your UI logic in TypeScript while rendering actual native components.

✨ Features

🚀 Native Performance - Renders actual native views, not web views
📱 Cross-Platform - Single codebase for iOS and Android
🎨 Familiar Angular - Use Angular components, services, and dependency injection
🔄 Hot Reload - Fast development with hot reload support
🎯 TypeScript - Full TypeScript support with strict type checking
📦 Angular 18+ - Supports standalone components and signals
⚡ Optimized - Built-in performance optimizations (style caching, easing LUTs)
🛡️ Type-Safe - No any types - fully typed codebase

📦 Installation

# Using pnpm (recommended)
pnpm add @pegasusheavy/angular-platform-mobile

# Using npm
npm install @pegasusheavy/angular-platform-mobile

# Using yarn
yarn add @pegasusheavy/angular-platform-mobile

🚀 Quick Start

1. Initialize a new project

npx ng-mobile init my-app --platform both
cd my-app

2. Create your Angular app

// src/app/app.component.ts
import { Component } from '@angular/core';
import { ViewComponent, TextComponent, ButtonComponent } from '@pegasusheavy/angular-platform-mobile';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ViewComponent, TextComponent, ButtonComponent],
  template: `
    <mobile-view [style]="containerStyle">
      <mobile-text [style]="titleStyle">Welcome to Angular Mobile!</mobile-text>
      <mobile-button
        title="Get Started"
        color="#007AFF"
        (press)="onPress()">
      </mobile-button>
    </mobile-view>
  `
})
export class AppComponent {
  containerStyle = {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  };

  titleStyle = {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  };

  onPress() {
    console.log('Button pressed!');
  }
}

3. Bootstrap the app

// src/main.ts
import { bootstrapMobileApplication } from '@pegasusheavy/angular-platform-mobile';
import { AppComponent } from './app/app.component';

bootstrapMobileApplication(AppComponent, {
  config: {
    debug: true,
    appId: 'com.mycompany.myapp',
  },
}).catch(err => console.error(err));

4. Run on device

# Run on Android
npx ng-mobile run android

# Run on iOS
npx ng-mobile run ios

📱 Components

Core Components

Component	iOS	Android	Description
`<mobile-view>`	UIView	ViewGroup	Basic container view
`<mobile-text>`	UILabel	TextView	Text display
`<mobile-image>`	UIImageView	ImageView	Image display
`<mobile-scroll-view>`	UIScrollView	ScrollView	Scrollable container
`<mobile-text-input>`	UITextField	EditText	Text input field
`<mobile-button>`	UIButton	Button	Native button
`<mobile-touchable>`	-	-	Touchable wrapper
`<mobile-flat-list>`	UITableView	RecyclerView	Virtualized list
`<mobile-modal>`	UIViewController	Dialog	Modal dialog
`<mobile-switch>`	UISwitch	Switch	Toggle switch
`<mobile-slider>`	UISlider	SeekBar	Slider control
`<mobile-webview>`	WKWebView	WebView	Web content
`<mobile-safe-area-view>`	-	-	Safe area container
`<mobile-status-bar>`	-	-	Status bar control
`<mobile-activity-indicator>`	UIActivityIndicatorView	ProgressBar	Loading spinner

Example Usage

import { Component } from '@angular/core';
import {
  ViewComponent,
  TextComponent,
  ImageComponent,
  ScrollViewComponent,
  TextInputComponent
} from '@pegasusheavy/angular-platform-mobile';

@Component({
  selector: 'app-profile',
  standalone: true,
  imports: [
    ViewComponent,
    TextComponent,
    ImageComponent,
    ScrollViewComponent,
    TextInputComponent
  ],
  template: `
    <mobile-scroll-view [style]="{ flex: 1 }">
      <mobile-view [style]="containerStyle">
        <mobile-image
          [source]="{ uri: 'https://example.com/avatar.jpg' }"
          [style]="avatarStyle">
        </mobile-image>

        <mobile-text [style]="nameStyle">{{ userName }}</mobile-text>

        <mobile-text-input
          [(ngModel)]="bio"
          placeholder="Enter your bio"
          [style]="inputStyle"
          multiline>
        </mobile-text-input>
      </mobile-view>
    </mobile-scroll-view>
  `
})
export class ProfileComponent {
  userName = 'John Doe';
  bio = '';

  containerStyle = { padding: 20, alignItems: 'center' };
  avatarStyle = { width: 100, height: 100, borderRadius: 50 };
  nameStyle = { fontSize: 20, fontWeight: 'bold', marginTop: 16 };
  inputStyle = { width: '100%', marginTop: 20, padding: 12, borderWidth: 1, borderColor: '#ddd', borderRadius: 8 };
}

🎨 Styling

Style properties follow React Native conventions:

const styles = {
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 20,
  },

  card: {
    backgroundColor: '#ffffff',
    borderRadius: 12,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3, // Android shadow
  },

  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333333',
  },
};

🔧 Services

NavigationService

import { NavigationService } from '@pegasusheavy/angular-platform-mobile';

@Component({ ... })
export class HomeComponent {
  constructor(private nav: NavigationService) {}

  goToProfile() {
    this.nav.navigate('Profile', { userId: '123' });
  }

  goBack() {
    this.nav.goBack();
  }
}

StorageService

import { StorageService } from '@pegasusheavy/angular-platform-mobile';

@Component({ ... })
export class SettingsComponent {
  constructor(private storage: StorageService) {}

  async saveSettings() {
    await this.storage.setItem('theme', 'dark');
  }

  async loadSettings() {
    const theme = await this.storage.getItem('theme');
  }
}

DeviceService

import { DeviceService } from '@pegasusheavy/angular-platform-mobile';

@Component({ ... })
export class AppComponent {
  constructor(private device: DeviceService) {
    console.log('Platform:', device.platform);
    console.log('Is iOS:', device.isIOS);
    console.log('Is Android:', device.isAndroid);
  }
}

PermissionsService

import { PermissionsService } from '@pegasusheavy/angular-platform-mobile';

@Component({ ... })
export class CameraComponent {
  constructor(private permissions: PermissionsService) {}

  async requestCamera() {
    const status = await this.permissions.request('camera');
    if (status === 'granted') {
      // Access camera
    }
  }
}

AlertService

import { AlertService } from '@pegasusheavy/angular-platform-mobile';

@Component({ ... })
export class MyComponent {
  constructor(private alert: AlertService) {}

  showAlert() {
    this.alert.alert('Title', 'Message', [
      { text: 'Cancel', style: 'cancel' },
      { text: 'OK', onPress: () => console.log('OK pressed') },
    ]);
  }
}

🖥️ CLI Commands

# Initialize a new project
ng-mobile init my-app --platform both

# Start development server
ng-mobile start

# Build the app
ng-mobile build android
ng-mobile build ios
ng-mobile build android --release

# Run on device/emulator
ng-mobile run android
ng-mobile run ios
ng-mobile run android --device
ng-mobile run ios --release

# View device logs
ng-mobile logs android
ng-mobile logs ios

# List connected devices
ng-mobile devices

# Clean build artifacts
ng-mobile clean

# Link native dependencies
ng-mobile link

📁 Project Structure

my-app/
├── android/                  # Android project
│   ├── app/
│   │   ├── src/main/
│   │   │   ├── java/        # Kotlin/Java source
│   │   │   ├── res/         # Android resources
│   │   │   └── AndroidManifest.xml
│   │   └── build.gradle
│   └── settings.gradle
├── ios/                      # iOS project
│   ├── App/
│   │   ├── AppDelegate.swift
│   │   └── Info.plist
│   ├── App.xcodeproj
│   └── Podfile
├── src/                      # Angular source
│   ├── app/
│   │   └── app.component.ts
│   └── main.ts
├── assets/                   # Shared assets
├── ng-mobile.json           # Project config
├── package.json
└── tsconfig.json

⚙️ Configuration

ng-mobile.json

{
  "name": "MyApp",
  "displayName": "My App",
  "appId": "com.example.myapp",
  "platforms": {
    "android": {
      "minSdkVersion": 24,
      "targetSdkVersion": 34
    },
    "ios": {
      "deploymentTarget": "15.0"
    }
  },
  "bundleEntry": "./src/main.ts",
  "outputPath": "./dist"
}

📋 Requirements

Node.js 18+
Angular 18+
TypeScript 5.3+

For Android Development

Android Studio
Android SDK (API 24+)
Java 17+

For iOS Development

macOS
Xcode 15+
CocoaPods

⚡ Performance

Angular Platform Mobile includes built-in performance optimizations:

Style Caching - ~20x faster style transformations
Easing LUTs - ~79x faster animation easing calculations
Message Batching - Reduced bridge overhead
Diff-based Updates - Only send changed properties

Run benchmarks:

pnpm benchmark

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

See LICENSE for details.

💖 Support

If you find this project useful, please consider:

⭐ Starring the repository
🐛 Reporting bugs
💡 Suggesting features
🎁 Supporting on Patreon

Name		Name	Last commit message	Last commit date
Latest commit History 51 Commits
.cursor/rules		.cursor/rules
.github		.github
.husky		.husky
bin		bin
docs		docs
native		native
src		src
templates/sample-app/src		templates/sample-app/src
.gitignore		.gitignore
.npmignore		.npmignore
AGENTS.md		AGENTS.md
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
commitlint.config.js		commitlint.config.js
eslint.config.js		eslint.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts
vitest.setup.ts		vitest.setup.ts

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

Angular Platform Mobile

Overview

✨ Features

📦 Installation

🚀 Quick Start

1. Initialize a new project

2. Create your Angular app

3. Bootstrap the app

4. Run on device

📱 Components

Core Components

Example Usage

🎨 Styling

🔧 Services

NavigationService

StorageService

DeviceService

PermissionsService

AlertService

🖥️ CLI Commands

📁 Project Structure

⚙️ Configuration

ng-mobile.json

📋 Requirements

For Android Development

For iOS Development

⚡ Performance

🤝 Contributing

📄 License

💖 Support

About

Topics

Resources

Contributing

Stars

Watchers

Forks

Releases

Sponsor this project

Packages

Used by

Contributors

Languages