Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ionic/angular

Package Overview
Dependencies
Maintainers
16
Versions
3182
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ionic/angular

Angular specific wrappers for @ionic/core

  • 4.1.0-dev.201903041834.ad20bd6
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
140K
increased by1.99%
Maintainers
16
Weekly downloads
 
Created

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

Keywords

FAQs

Package last updated on 04 Mar 2019

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc