Skip to content
Merged
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
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/angular/build-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Ionic UI components as Angular standalone components is supported starting in Io

Developers can use Ionic components as standalone components to take advantage of treeshaking and newer Angular features. This option involves importing specific Ionic components in the Angular components you want to use them in. Developers can use Ionic standalone components even if their Angular application is NgModule-based.

See the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for instructions on how to update your Ionic app to make use of Ionic standalone components.
Refer to the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for instructions on how to update your Ionic app to make use of Ionic standalone components.

**Benefits**

Expand Down
2 changes: 1 addition & 1 deletion docs/angular/lifecycle.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ Below are some tips on use cases for each of the life cycle events.

- `ngOnInit` - Initialize your component and load data from services that don't need refreshing on each subsequent visit.
- `ionViewWillEnter` - Since `ionViewWillEnter` is called every time the view is navigated to (regardless if initialized or not), it's a good method to load data from services. However, if your data comes back during the animation, it can start lots of DOM manipulation, which can cause some janky animations.
- `ionViewDidEnter` - If you see performance problems from using `ionViewWillEnter` when loading data, you can do your data calls in `ionViewDidEnter` instead. This event won't fire until after the page is visible by the user, however, so you might want to use either a loading indicator or a skeleton screen, so content doesn't flash in un-naturally after the transition is complete.
- `ionViewDidEnter` - If you encounter performance problems from using `ionViewWillEnter` when loading data, you can do your data calls in `ionViewDidEnter` instead. This event won't fire until after the page is visible by the user, however, so you might want to use either a loading indicator or a skeleton screen, so content doesn't flash in un-naturally after the transition is complete.
- `ionViewWillLeave` - Can be used for cleanup, like unsubscribing from observables. Since `ngOnDestroy` might not fire when you navigate from the current page, put your cleanup code here if you don't want it active while the screen is not in view.
- `ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here.
- `ngOnDestroy` - Cleanup logic for your pages that you don't want to clean up in `ionViewWillLeave`.
18 changes: 9 additions & 9 deletions docs/angular/navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';

This guide covers how routing works in an app built with Ionic and Angular.

The Angular Router is one of the most important libraries in an Angular application. Without it, apps would be single view/single context apps or would not be able to maintain their navigation state on browser reloads. With Angular Router, we can create rich apps that are linkable and have rich animations (when paired with Ionic of course). Let's look at the basics of the Angular Router and how we can configure it for Ionic apps.
The Angular Router is one of the most important libraries in an Angular application. Without it, apps would be single view/single context apps or would not be able to maintain their navigation state on browser reloads. With Angular Router, we can create rich apps that are linkable and have rich animations (when paired with Ionic of course). Let's walk through the basics of the Angular Router and how we can configure it for Ionic apps.

## A simple Route

Expand Down Expand Up @@ -120,15 +120,15 @@ Both options provide the same navigation mechanism, just fitting different use c

### Navigating using LocationStrategy.historyGo

Angular Router has a [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) method that allows developers to move forward or backward through the application history. Let's take a look at an example.
Angular Router has a [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) method that allows developers to move forward or backward through the application history. Let's walk through an example.

Say you have the following application history:

`/pageA` --> `/pageB` --> `/pageC`

If you were to call `LocationStrategy.historyGo(-2)` on `/pageC`, you would be brought back to `/pageA`. If you then called `LocationStrategy.historyGo(2)`, you would be brought to `/pageC`.

An key characteristic of `LocationStrategy.historyGo()` is that it expects your application history to be linear. This means that `LocationStrategy.historyGo()` should not be used in applications that make use of non-linear routing. See [Linear Routing versus Non-Linear Routing](#linear-routing-versus-non-linear-routing) for more information.
An key characteristic of `LocationStrategy.historyGo()` is that it expects your application history to be linear. This means that `LocationStrategy.historyGo()` should not be used in applications that make use of non-linear routing. Refer to [Linear Routing versus Non-Linear Routing](#linear-routing-versus-non-linear-routing) for more information.

## Lazy loading routes

Expand Down Expand Up @@ -263,9 +263,9 @@ We recommend keeping your application as simple as possible until you need to ad

The two most common uses of non-linear routing is with tabs and nested `ion-router-outlet`s. We recommend only using non-linear routing if your application meets the tabs or nested router outlet use cases.

For more on tabs, please see [Working with Tabs](#working-with-tabs).
For more on tabs, please refer to [Working with Tabs](#working-with-tabs).

For more on nested router outlets, please see [Nested Routes](#nested-routes).
For more on nested router outlets, please refer to [Nested Routes](#nested-routes).

## Shared URLs versus Nested Routes

Expand Down Expand Up @@ -319,13 +319,13 @@ The above routes are nested because they are in the `children` array of the pare

Shared URLs are great when you want to transition from page A to page B while preserving the relationship between the two pages in the URL. In our previous example, a button on the `/dashboard` page could transition to the `/dashboard/stats` page. The relationship between the two pages is preserved because of a) the page transition and b) the url.

Nested routes should be used when you want to render content in outlet A while also rendering sub-content inside of a nested outlet B. The most common use case you will run into is tabs. When you load up a tabs Ionic starter application, you will see `ion-tab-bar` and `ion-tabs` components rendered in the first `ion-router-outlet`. The `ion-tabs` component renders another `ion-router-outlet` which is responsible for rendering the contents of each tab.
Nested routes should be used when you want to render content in outlet A while also rendering sub-content inside of a nested outlet B. The most common use case you will run into is tabs. When you load up a tabs Ionic starter application, the first `ion-router-outlet` renders the `ion-tab-bar` and `ion-tabs` components. The `ion-tabs` component renders another `ion-router-outlet` which is responsible for rendering the contents of each tab.

There are very few use cases in which nested routes make sense in mobile applications. When in doubt, use the shared URL route configuration. We strongly caution against using nested routing in contexts other than tabs as it can quickly make navigating your app confusing.

## Working with Tabs

With Tabs, the Angular Router provides Ionic the mechanism to know what components should be loaded, but the heavy lifting is actually done by the tabs component. Let's look at a simple example.
With Tabs, the Angular Router provides Ionic the mechanism to know what components should be loaded, but the heavy lifting is actually done by the tabs component. Let's walk through a simple example.

```ts
const routes: Routes = [
Expand Down Expand Up @@ -378,7 +378,7 @@ Each tab in Ionic is treated as an individual navigation stack. This means if yo

This behavior is important to note as it is different than most tab implementations that are found in other web based UI libraries. Other libraries typically manage tabs as one single history stack.

Since Ionic is focused on helping developers build mobile apps, the tabs in Ionic are designed to match native mobile tabs as closely as possible. As a result, there may be certain behaviors in Ionic's tabs that differ from tabs implementations you have seen in other UI libraries. Read on to learn more about some of these differences.
Since Ionic is focused on helping developers build mobile apps, the tabs in Ionic are designed to match native mobile tabs as closely as possible. As a result, there may be certain behaviors in Ionic's tabs that differ from tabs implementations in other UI libraries. Read on to learn more about some of these differences.

### Child Routes within Tabs

Expand Down Expand Up @@ -442,7 +442,7 @@ Since each tab is its own navigation stack, it is important to note that these n

A good example of this in practice is the iOS App Store and Google Play Store mobile applications. These apps both provide tabbed interfaces, but neither one ever routes the user across tabs. For example, the "Games" tab in the iOS App Store app never directs users to the "Search" tab and vice versa.

Let's take a look at a couple common mistakes that are made with tabs.
Let's go over a couple common mistakes that are made with tabs.

**A Settings Tab That Multiple Tabs Reference**

Expand Down
2 changes: 1 addition & 1 deletion docs/angular/overlays.md
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ import type { ModalOptions, PopoverOptions } from '@ionic/angular/standalone';

## Docs for Overlays in Ionic

For full docs and to see usage examples, visit the docs page for each of the overlays in Ionic:
For full docs and usage examples, visit the docs page for each of the overlays in Ionic:

- [Action Sheet](https://ionicframework.com/docs/api/action-sheet)
- [Alert](https://ionicframework.com/docs/api/alert)
Expand Down
2 changes: 1 addition & 1 deletion docs/angular/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards';

## Angular Version Support

Ionic Angular v8 supports Angular versions 16 and above. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular).
Ionic Angular v8 supports Angular versions 16 and above. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular).

## Angular Tooling

Expand Down
2 changes: 1 addition & 1 deletion docs/angular/performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ trackItems(index: number, itemObject: any) {

In this example, we have an array of objects called `items`. Each object contains a `value` and an `id`. Using `trackBy`, we pass a `trackItems` function which returns the `id` of each object. This `id` is used to provide a stable identity for each loop element.

For more information on how Angular manages change propagation with `ngFor` see https://angular.io/api/common/NgForOf#change-propagation.
For more information, refer to the [Angular NgForOf change propagation documentation](https://angular.io/api/common/NgForOf#change-propagation).

## From the Ionic Team

Expand Down
4 changes: 2 additions & 2 deletions docs/angular/pwa.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ After `@angular/pwa` has been added, a new `ngsw-config.json` file will be creat
}
```

There are two sections in here, one for app specific resources (JS, CSS, HTML) and assets the app will load on demand. Depending on your app, these options can be customized. For a more detailed guide, read [the official guide from the Angular Team.](https://angular.io/guide/service-worker-config)
There are two sections in here, one for app specific resources (JS, CSS, HTML) and assets the app will load on demand. Depending on your app, these options can be customized. For a more detailed guide, read [the official guide from the Angular Team](https://angular.io/guide/service-worker-config).

## Deploying

Expand Down Expand Up @@ -149,7 +149,7 @@ The last thing needed is to make sure caching headers are being set correctly. T
}
```

For more information about the `firebase.json` properties, see the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json).
For more information about the `firebase.json` properties, refer to the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json).

Next, build an optimized version of the app by running:

Expand Down
12 changes: 6 additions & 6 deletions docs/angular/quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import DocsCards from '@components/global/DocsCards';

Welcome! This guide will walk you through the basics of Ionic Angular development. You'll learn how to set up your development environment, generate a simple project, explore the project structure, and understand how Ionic components work. This is perfect for getting familiar with Ionic Angular before building your first real app.

If you're looking for a high-level overview of what Ionic Angular is and how it fits into the Angular ecosystem, see the [Ionic Angular Overview](overview).
If you're looking for a high-level overview of what Ionic Angular is and how it fits into the Angular ecosystem, refer to the [Ionic Angular Overview](overview).

## Prerequisites

Expand All @@ -28,7 +28,7 @@ node -v
npm -v
```

If you don't have Node.js and npm, [download Node.js here](https://nodejs.org/en/download) (which includes npm).
If you don't have Node.js and npm, [download Node.js](https://nodejs.org/en/download) (which includes npm).

## Create a Project with the Ionic CLI

Expand Down Expand Up @@ -175,7 +175,7 @@ And the template, in the `home.page.html` file, uses those components:
This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.

:::tip[Learn More]
For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
:::

## Add an Ionic Component
Expand Down Expand Up @@ -257,7 +257,7 @@ import { RouterLink } from '@angular/router';
```

:::info
Navigating can also be performed using Angular's Router service. See the [Angular Navigation documentation](/docs/angular/navigation.md#navigating-to-different-routes) for more information.
Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/docs/angular/navigation.md#navigating-to-different-routes) for more information.
:::

## Add Icons to the New Page
Expand Down Expand Up @@ -301,7 +301,7 @@ export class NewPage implements OnInit {

Alternatively, you can register icons in `app.component.ts` to use them throughout your app.

For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).

## Call Component Methods

Expand Down Expand Up @@ -406,7 +406,7 @@ ionic cap open ios
ionic cap open android
```

See [Capacitor's Getting Started guide](https://capacitorjs.com/docs/getting-started/with-ionic) for more.
Refer to [Capacitor's Getting Started guide](https://capacitorjs.com/docs/getting-started/with-ionic) for more.

## Explore More

Expand Down
2 changes: 1 addition & 1 deletion docs/angular/slides.md
Original file line number Diff line number Diff line change
Expand Up @@ -359,7 +359,7 @@ If you are running into issues with the migration, please create a post on the [

### Where do I file bug reports?

Before opening an issue, please consider creating a post on the <a href="https://github.com/nolimits4web/swiper/discussions" target="_blank" rel="noopener noreferrer">Swiper Discussion Board</a> or the <a href="https://forum.ionicframework.com" target="_blank">Ionic Forum</a> to see if your issue can be resolved by the community.
Before opening an issue, please consider creating a post on the <a href="https://github.com/nolimits4web/swiper/discussions" target="_blank" rel="noopener noreferrer">Swiper Discussion Board</a> or the <a href="https://forum.ionicframework.com" target="_blank">Ionic Forum</a> to check if your issue can be resolved by the community.

If you are running into problems with the Swiper library, new bugs should be filed on the <a href="https://github.com/nolimits4web/swiper/issues" target="_blank" rel="noopener noreferrer">Swiper issue tracker</a>.

Expand Down
4 changes: 2 additions & 2 deletions docs/angular/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ describe('PayrolService', () => {

#### Testing HTTP Data Services

Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please see Angular's <a href="https://angular.io/guide/http#testing-http-requests" target="_blank">Angular's Testing HTTP requests</a> guide.
Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please refer to Angular's <a href="https://angular.io/guide/http#testing-http-requests" target="_blank">Angular's Testing HTTP requests</a> guide.

This basic setup for such a test looks like this:

Expand Down Expand Up @@ -261,7 +261,7 @@ describe('IssTrackingDataService', () => {

A pipe is like a service with a specifically defined interface. It is a class that contains one public method, `transform`, which manipulates the input value (and other optional arguments) in order to create the output that is rendered on the page. To test a pipe: instantiate the pipe, call the transform method, and verify the results.

As a simple example, let's look at a pipe that takes a `Person` object and formats the name. For the sake of simplicity, let's say a `Person` consists of an `id`, `firstName`, `lastName`, and `middleInitial`. The requirements for the pipe are to print the name as "Last, First M." handling situations where a first name, last name, or middle initial do not exist. Such a test might look like this:
As a simple example, let's consider a pipe that takes a `Person` object and formats the name. For the sake of simplicity, let's say a `Person` consists of an `id`, `firstName`, `lastName`, and `middleInitial`. The requirements for the pipe are to print the name as "Last, First M." handling situations where a first name, last name, or middle initial do not exist. Such a test might look like this:

```tsx
import { NamePipe } from './name.pipe';
Expand Down
2 changes: 1 addition & 1 deletion docs/angular/virtual-scroll.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,4 +130,4 @@ For example:

## Further Reading

This only covers a small portion of what the CDK Virtual Scroller is capable of. For more details, please see the [Angular CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview).
This only covers a small portion of what the CDK Virtual Scroller is capable of. For more details, please refer to the [Angular CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview).
Loading