@ionic/angular

UI Components

Ionic provides a wide range of pre-built UI components that are designed to look and feel like native mobile components. This includes buttons, headers, footers, forms, and more.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button (click)="doSomething()">Click Me</ion-button>
</ion-content>

Navigation

Ionic's navigation system allows for easy navigation between pages in your application. It supports both stack-based and tab-based navigation.

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private navCtrl: NavController) {}

  goToNextPage() {
    this.navCtrl.navigateForward('/next-page');
  }
}

Theming

Ionic allows for extensive theming and customization of your application. You can define custom colors, fonts, and other styles to match your brand.

:root {
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #0cd1e8;
  --ion-color-tertiary: #7044ff;
  --ion-color-success: #10dc60;
  --ion-color-warning: #ffce00;
  --ion-color-danger: #f04141;
  --ion-color-light: #f4f5f8;
  --ion-color-medium: #989aa2;
  --ion-color-dark: #222428;
}

Native Device Integration

Ionic, in combination with Capacitor, allows for easy integration with native device features such as the camera, GPS, and more.

import { Component } from '@angular/core';
import { Camera, CameraResultType } from '@capacitor/camera';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  async takePicture() {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: false,
      resultType: CameraResultType.Uri
    });
    console.log(image.webPath);
  }
}