Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
20 changes: 16 additions & 4 deletions docs/angular/overlays.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,10 @@ import { MyRouteService } from './my-route.service';
providers: [MyRouteService], // Service provided at route level
})
export class FeatureComponent {
constructor(private modalController: ModalController, private injector: Injector) {}
constructor(
private modalController: ModalController,
private injector: Injector
) {}

async openModal() {
const modal = await this.modalController.create({
Expand Down Expand Up @@ -113,7 +116,10 @@ import { MyService } from './my.service';
templateUrl: './feature.component.html',
})
export class FeatureComponent {
constructor(private modalController: ModalController, private injector: Injector) {}
constructor(
private modalController: ModalController,
private injector: Injector
) {}

async openModal() {
const myService = new MyService();
Expand Down Expand Up @@ -148,7 +154,10 @@ import { MyModalComponent } from './my-modal.component';
templateUrl: './feature.component.html',
})
export class FeatureComponent {
constructor(private modalController: ModalController, private injector: Injector) {}
constructor(
private modalController: ModalController,
private injector: Injector
) {}

async openModal() {
const modal = await this.modalController.create({
Expand All @@ -174,7 +183,10 @@ import { MyPopoverComponent } from './my-popover.component';
templateUrl: './feature.component.html',
})
export class FeatureComponent {
constructor(private popoverController: PopoverController, private injector: Injector) {}
constructor(
private popoverController: PopoverController,
private injector: Injector
) {}

async openPopover(event: Event) {
const popover = await this.popoverController.create({
Expand Down
6 changes: 4 additions & 2 deletions docs/angular/zoneless.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,9 @@ import { ChangeDetectorRef, Component, inject } from '@angular/core';

@Component({
selector: 'app-list',
template: `@for (item of items; track item) { <ion-item>{{ item }}</ion-item> }`,
template: `@for (item of items; track item) {
<ion-item>{{ item }}</ion-item>
}`,
})
export class ListPage {
private cdr = inject(ChangeDetectorRef);
Expand Down Expand Up @@ -113,7 +115,7 @@ Content projected into an inline `ion-modal` or `ion-popover` follows the same r
<ng-template>
<ion-list>
@for (item of items(); track item) {
<ion-item>{{ item }}</ion-item>
<ion-item>{{ item }}</ion-item>
}
</ion-list>
</ng-template>
Expand Down
4 changes: 1 addition & 3 deletions docs/cli/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,7 @@ module.exports = function (ctx) {

## Multi-app Projects

<small>
<em>Available in CLI 6.2.0+</em>
</small>
<small>_Available in CLI 6.2.0+_</small>

The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo).

Expand Down
2 changes: 1 addition & 1 deletion docs/core-concepts/fundamentals.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ For apps that are built with Angular and `@ionic/angular`, we recommend using th

An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms.

One of the most common use cases for Ionic is to build an app which can be downloaded from both the [App Store](https://www.apple.com/ios/app-store/) and [Play Store](https://play.google.com/). Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for <i>full</i> Native SDK access.
One of the most common use cases for Ionic is to build an app which can be downloaded from both the [App Store](https://www.apple.com/ios/app-store/) and [Play Store](https://play.google.com/). Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for _full_ Native SDK access.

Projects such as [Capacitor](https://capacitorjs.com/) and [Cordova](https://cordova.apache.org/) are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more.

Expand Down
2 changes: 1 addition & 1 deletion docs/core-concepts/what-are-progressive-web-apps.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ To be considered a Progressive Web App, your app must be:

{/* cspell:disable */}

<em>[Addy Osmani: Progressive web apps](https://addyosmani.com/blog/getting-started-with-progressive-web-apps/)</em>
_[Addy Osmani: Progressive web apps](https://addyosmani.com/blog/getting-started-with-progressive-web-apps/)_

{/* cspell:enable */}

Expand Down
2 changes: 1 addition & 1 deletion docs/deployment/app-store.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ If the upload is successful the app should be listed under 'Activities' on [iTun
As an app grows, it will need to be updated with new features and fixes.
An app can be updated by either submitting a new version to Apple, or by using a live update service like Appflow's [live update feature](https://ionic.io/docs/appflow/deploy/intro).

With <strong>Live Updates</strong>, app changes can be pushed in realtime directly to users from the Appflow dashboard, without waiting for App Store approvals.
With **Live Updates**, app changes can be pushed in realtime directly to users from the Appflow dashboard, without waiting for App Store approvals.

:::note
In order for the iOS App Store to accept the updated build, the config.xml file will need to be edited to increment the version value, then rebuild the app for release following the same instructions above.
Expand Down
12 changes: 6 additions & 6 deletions docs/developer-resources/guides/first-app-v3/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,27 +28,27 @@ ionic start photo-gallery tabs

This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!

<strong>“Would you like to integrate your new app with Cordova to target native iOS and Android?”</strong>
**“Would you like to integrate your new app with Cordova to target native iOS and Android?”**

Type “y” and press Enter. Project setup may take a few moments.

<strong>“Install the free Appflow SDK and connect your app?”</strong>
**“Install the free Appflow SDK and connect your app?”**

Type “y” and press Enter. [Appflow](https://ionicframework.com/pro) is a powerful set of services and features built on top of the flagship Ionic Framework. This includes updating your app instantly (skipping the app store review process!), packaging apps in the cloud, and error monitoring.

<strong>Log into your Ionic Account</strong>
**Log into your Ionic Account**

Sign in now to easily access awesome features like Live Deploys later in this tutorial.

<strong>What would you like to do?</strong>
**What would you like to do?**

Choose “Create a new app on Appflow.”

<strong>Which git host would you like to use?</strong>
**Which git host would you like to use?**

Choose “Appflow.”

<strong>“How would you like to connect to Appflow?”</strong>
**“How would you like to connect to Appflow?”**

- Choose “Automatically setup a new SSH key pair for Appflow” if you haven’t used SSH before.
- Choose “Use an existing SSH key pair” if you’ve used SSH before.
Expand Down
12 changes: 5 additions & 7 deletions docs/developer-resources/guides/first-app-v4/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,11 @@ It’s easy to get started. Note that all code referenced in this guide can be [
Download/install these right away to ensure an optimal Ionic development experience:

- [Git](https://git-scm.com/downloads) for version control.
- <strong>SSH client</strong>, such as [PuTTy](https://putty.software/), for secure login to Appflow.
- <strong>Node.js</strong> for interacting with the Ionic ecosystem. [Download the LTS version](https://nodejs.org/en/).
- <strong>A code editor</strong> for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
- <strong>Command-line terminal (CLI)</strong>: FYI <strong>Windows</strong> users, for the best Ionic experience, we
recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode. For <strong>
Mac/Linux
</strong> users, virtually any terminal will work.
- **SSH client**, such as [PuTTy](https://putty.software/), for secure login to Appflow.
- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version](https://nodejs.org/en/).
- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
- **Command-line terminal (CLI)**: FYI **Windows** users, for the best Ionic experience, we
recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode. For **Mac/Linux** users, virtually any terminal will work.

## Install Ionic and Cordova

Expand Down
4 changes: 1 addition & 3 deletions docs/developing/tips.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,7 @@ Global packages will now be installed in the `~/.nvm` directory, so permission e

### Option 2

<small>
<em>Does not apply to Windows</em>
</small>
<small>_Does not apply to Windows_</small>

Change the owner of npm's directories to the current user:

Expand Down
2 changes: 1 addition & 1 deletion docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ The official [Ionic CLI](cli.md), or Command Line Interface, is a tool that quic

## Appflow

To help build, deploy, and manage Ionic apps throughout their lifecycle, we offer a commercial service for production apps called [Appflow](https://ionic.io/appflow), which is <strong>separate from the open source Framework.</strong>
To help build, deploy, and manage Ionic apps throughout their lifecycle, we offer a commercial service for production apps called [Appflow](https://ionic.io/appflow), which is **separate from the open source Framework.**

Appflow helps developers and teams compile native app builds and deploy live code updates to Ionic apps from a centralized dashboard. Optional paid upgrades are available for more advanced capabilities like publishing directly to app stores, workflow automation, single sign-on (SSO) and access to connected services and integrations.

Expand Down
10 changes: 5 additions & 5 deletions docs/reference/glossary.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Bundling is the process of taking an app's dependencies (code you've written plu

### CLI {/* #cli */}

A CLI, or <strong>C</strong>ommand-<strong>L</strong>ine <strong>I</strong>nterface, is a text-based interface for interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often use Command Prompt. The Ionic community often uses this term to refer to [Ionic's CLI](https://ionicframework.com/docs/cli). Ionic's CLI can be used for a number of things, such as creating production builds of an app, running the development server, and accessing [Ionic commercial services](https://ionic.io/appflow).
A CLI, or **C**ommand-**L**ine **I**nterface, is a text-based interface for interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often use Command Prompt. The Ionic community often uses this term to refer to [Ionic's CLI](https://ionicframework.com/docs/cli). Ionic's CLI can be used for a number of things, such as creating production builds of an app, running the development server, and accessing [Ionic commercial services](https://ionic.io/appflow).

{/* cspell:enable */}

Expand All @@ -66,7 +66,7 @@ You may be familiar with variables from Sass. [CSS Variables](https://developers

### Decorators {/* #decorators */}

Decorators are expressions that return a function. They allow you to take an existing function, and extend its behavior. With TypeScript, you can also decorate <i>classes</i> and <i>parameters</i>. When you decorate a <strong>class</strong>, you are wrapping and extending the behavior of its constructor. In other words, the decorator will add some functionality when the constructor is called, and will then return the original constructor. When you decorate a <strong>parameter</strong>, you are wrapping the argument that gets passed in for that parameter. The decorator will add functionality when an argument is passed to the method, and then return the original argument.
Decorators are expressions that return a function. They allow you to take an existing function, and extend its behavior. With TypeScript, you can also decorate _classes_ and _parameters_. When you decorate a **class**, you are wrapping and extending the behavior of its constructor. In other words, the decorator will add some functionality when the constructor is called, and will then return the original constructor. When you decorate a **parameter**, you are wrapping the argument that gets passed in for that parameter. The decorator will add functionality when an argument is passed to the method, and then return the original argument.

### ES5 {/* #es5 */}

Expand Down Expand Up @@ -114,7 +114,7 @@ Modules in JavaScript are small, independent, and reusable pieces or code that a

### Monorepo {/* #monorepo */}

A <strong>monorepo</strong> is a single git repository with multiple projects. Advantages include simpler organization, shared tooling and dependencies, and better collaboration with teammates.
A **monorepo** is a single git repository with multiple projects. Advantages include simpler organization, shared tooling and dependencies, and better collaboration with teammates.

### Live Reload {/* #livereload */}

Expand All @@ -134,7 +134,7 @@ An observable is an object that emits events (or notifications). An observer is

### Package ID {/* #package-id */}

Referred to by Apple as <strong>Bundle ID</strong> and by Android as <strong>Application ID</strong>, the <strong>Package ID</strong> is used for identifying apps published to the App Store/Play Store. It is a string formatted in [reverse-DNS notation](https://en.wikipedia.org/wiki/Reverse_domain_name_notation).
Referred to by Apple as **Bundle ID** and by Android as **Application ID**, the **Package ID** is used for identifying apps published to the App Store/Play Store. It is a string formatted in [reverse-DNS notation](https://en.wikipedia.org/wiki/Reverse_domain_name_notation).

### Polyfill {/* #polyfill */}

Expand Down Expand Up @@ -162,7 +162,7 @@ A shim is a piece of code that normalizes an APIs across browsers. A shim can ha

### Transpiler {/* #transpiler */}

Transpilation is the process of converting code from one language to another language prior to execution. Typically, a transpiler will convert a high-level language to another high-level language. The most common type of <em>transpilation</em> in Ionic Framework is converting [ES2015/ES6](#es2015-es6) ([TypeScript](#typescript)) to [ES5](#es5) (traditional JavaScript).
Transpilation is the process of converting code from one language to another language prior to execution. Typically, a transpiler will convert a high-level language to another high-level language. The most common type of _transpilation_ in Ionic Framework is converting [ES2015/ES6](#es2015-es6) ([TypeScript](#typescript)) to [ES5](#es5) (traditional JavaScript).

### TypeScript {/* #typescript */}

Expand Down
3 changes: 3 additions & 0 deletions docs/reference/support.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,11 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
| v3 | v5.2.11 | v5.2.11 | 2.6.2 |

[^1]: Angular 14.x supported starting in Ionic v6.1.9. Angular 15.x supported starting in Ionic v6.3.6.

[^2]: Angular 17.x supported starting in Ionic v7.5.4.

[^3]: Angular 18.x supported starting in Ionic v8.2.0.

[^4]: `@ionic/angular` and `@ionic/react` require TypeScript 5.4+. Using Angular 21 requires TypeScript 5.9 or later, and Angular 22 requires TypeScript 6.0 or later, per Angular's own requirements.

**Angular 13+ Support On Older Versions of iOS**
Expand Down
2 changes: 1 addition & 1 deletion docs/theming/basics.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ When changing a color, it is important to set all of the related properties. Thi

## Platform Standards

Ionic components adapt their look and behavior based on the platform the app is running on. We call this <strong>Adaptive Styling</strong>. This allows developers to build apps that use the same codebase for multiple platforms, while still looking "native" to those particular platforms.
Ionic components adapt their look and behavior based on the platform the app is running on. We call this **Adaptive Styling**. This allows developers to build apps that use the same codebase for multiple platforms, while still looking "native" to those particular platforms.

Ionic has two **modes** that are used to customize the look of components based on the **platform**: `ios` and `md`. Each platform has a default mode, but this can easily be configured. For more information on customizing an application based on the platform, refer to [Platform Styles](platform-styles.md).

Expand Down
6 changes: 3 additions & 3 deletions docs/troubleshooting/native.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni

For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, `<widget>`. Refer to [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information.

2. **Open the project in <b>Xcode</b>.**
2. **Open the project in **Xcode**.**

For Capacitor, run the following to open the app in Xcode:

Expand All @@ -34,11 +34,11 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni

For Cordova, open Xcode. Use **File** &raquo; **Open** and locate the app. Open the app's `platforms/ios` directory.

3. **In <b>Project navigator</b>, select the project root to open the project editor. Under the <b>Identity</b> section, verify that the Package ID that was set matches the Bundle Identifier.**
3. **In **Project navigator**, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier.**

![Xcode showing the Identity section for an iOS app with fields for Display Name, Bundle Identifier, Version, and Build.](/img/running/ios-xcode-identity-setup.png 'Xcode Identity Section')

4. **In the same project editor, under the <b>Signing</b> section, ensure <b>Automatically manage signing</b> is enabled.** Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.
4. **In the same project editor, under the **Signing** section, ensure **Automatically manage signing** is enabled.** Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.

![Xcode showing the Signing section with 'Automatically manage signing' enabled and a Development Team selected.](/img/running/ios-xcode-signing-setup.png 'Xcode Signing Section')

Expand Down
16 changes: 9 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading