@ionic/angular

What is @ionic/angular?

@ionic/angular is a package that provides Angular integration for the Ionic Framework, which is a popular framework for building cross-platform mobile applications using web technologies. It allows developers to create high-quality mobile apps with a native look and feel using Angular.

What are @ionic/angular's main functionalities?

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);
  }
}

Other packages similar to @ionic/angular

react-native

React Native is a framework for building native apps using React. It allows developers to use React along with native platform capabilities to build mobile applications. Compared to @ionic/angular, React Native provides a more 'native' experience but requires knowledge of React and native development.

flutter

Flutter is a UI toolkit from Google for building natively compiled applications for mobile, web, and desktop from a single codebase. It uses the Dart programming language. Compared to @ionic/angular, Flutter offers a more performant and visually consistent experience but requires learning Dart.

nativescript

NativeScript is a framework for building native iOS and Android apps using JavaScript, TypeScript, or Angular. It provides direct access to native APIs. Compared to @ionic/angular, NativeScript offers deeper native integration but can be more complex to set up and use.

README

@ionic/angular

Ionic Angular specific building blocks on top of @ionic/core components.

Related

• Ionic Core Components
• Ionic Documentation
• Ionic Worldwide Slack
• Ionic Forum
• Ionicons
• Stencil
• Stencil Worldwide Slack
• Capacitor

License

• MIT

Testing ng-add in ionic

1. Pull the latest from master
2. Build ionic/angular: npm run build
3. Run npm link from ionic/angular directory
4. Create a blank angular project

ng new add-test
// Say yes to including the router, we need it
cd add-test

1. To run schematics locally, we need the schematics-cli (once published, this will not be needed)

npm install @angular-devkit/schematics-cli

1. Link @ionic/angular

npm link @ionic/angular

1. Run the local copy of the ng-add schematic

$ npx schematics @ionic/angular:ng-add

You'll now be able to add ionic components to a vanilla Angular app setup.