![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@ionic/angular
Advanced tools
Package description
@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.
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);
}
}
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 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 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.
Changelog
Readme
Ionic Angular specific building blocks on top of @ionic/core components.
main
npm run build
npm link
from ionic/angular/dist
directoryng new add-test
// Say yes to including the router, we need it
cd add-test
npm install @angular-devkit/schematics-cli
@ionic/angular
npm link @ionic/angular
$ npx schematics @ionic/angular:ng-add
You'll now be able to add ionic components to a vanilla Angular app setup.
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
.
FAQs
Angular specific wrappers for @ionic/core
The npm package @ionic/angular receives a total of 122,436 weekly downloads. As such, @ionic/angular popularity was classified as popular.
We found that @ionic/angular demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.