@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

@ionic/angular

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

License

Testing ng-add in ionic

Pull the latest from main
Build ionic/angular: npm run build
Run npm link from ionic/angular/dist directory
Create a blank angular project

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

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

npm install @angular-devkit/schematics-cli

Link @ionic/angular

npm link @ionic/angular

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.

Project Structure

common

This is where logic that is shared between lazy loaded and standalone components live. For example, the lazy loaded IonPopover and standalone IonPopover components extend from a base IonPopover implementation that exists in this directory.

Note: This directory exposes internal APIs and is only accessed in the standalone and src submodules. Ionic developers should never import directly from @ionic/angular/common. Instead, they should import from @ionic/angular or @ionic/angular/standalone.

standalone

This is where the standalone component implementations live. It was added as a separate entry point to avoid any lazy loaded logic from accidentally being pulled in to the final build. Having a separate directory allows the lazy loaded implementation to remain accessible from @ionic/angular for backwards compatibility.

Ionic developers can access this by importing from @ionic/angular/standalone.

src

This is where the lazy loaded component implementations live.

Ionic developers can access this by importing from @ionic/angular.

Keywords

FAQs

What is @ionic/angular?

Is @ionic/angular popular?

Is @ionic/angular well maintained?

Package last updated on 07 Jun 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install