1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156---
title: Updating to v7
---
# Updating from Ionic 6 to 7
:::note
This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0) before starting this guide.
:::
:::info Breaking Changes
For a **complete list of breaking changes** from Ionic 6 to Ionic 7, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-7x) in the Ionic Framework repository.
:::
## Getting Started
### Angular
1. Ionic 7 supports Angular 14+. Update to the latest version of Angular by following the [Angular Update Guide](https://update.angular.io/).
2. If your project is using rxjs, Ionic 7 requires a minimum rxjs version of 7.5.0:
```shell
npm install rxjs@7.5.0
```
3. Update to the latest version of Ionic 7:
```shell
npm install @ionic/angular@7
```
If you are using Ionic Angular Server and Ionic Angular Toolkit, be sure to update those as well:
```shell
npm install @ionic/angular@7 @ionic/angular-server@7 @ionic/angular-toolkit@9
```
> Note: `@ionic/angular-toolkit@9` requires a minimum of Angular 15. If you are still on Angular 14, then you can skip updating to `@ionic/angular-toolkit@9`.
### React
1. Ionic 7 supports React 17+. Update to the latest version of React:
```shell
npm install react@latest react-dom@latest
```
2. Update to the latest version of Ionic 7:
```shell
npm install @ionic/react@7 @ionic/react-router@7
```
### Vue
1. Ionic 7 supports Vue 3.0.6+. Update to the latest version of Vue:
```shell
npm install vue@latest vue-router@latest
```
3. Update to the latest version of Ionic 7:
```shell
npm install @ionic/vue@7 @ionic/vue-router@7
```
### Core
1. Update to the latest version of Ionic 7:
```shell
npm install @ionic/core@7
```
## Updating Your Code
### Browser Support
The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support) to ensure you are deploying apps to supported browsers.
If you have a `browserslist` or `.browserslistrc` file, update it with the following content:
```
Chrome >=79
ChromeAndroid >=79
Firefox >=70
Edge >=79
Safari >=14
iOS >=14
```
### Types
1. `ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
### Checkbox
1. Rename any usages of the `--background` and `--background-checked` CSS Variables to `--checkbox-background` and `--checkbox-background-checked`, respectively.
### Datetime
1. Remove any code that sets the `value` property to the empty string (`''`).
2. Remove any code that accesses the time zone information on the `value` property. Datetime does not manage time zones, so any time zone information provided is ignored.
### Input
1. Update any code that accesses the `detail` payload for the `ionInput` event from `event.detail` to `event.detail.value` as the detail payload is now an object containing a value and an event.
### Modal
1. Remove any usage of the `swipeToClose` property. Card modals are swipeable by default, so you can remove `swipeToClose` if you want your card modal to remain swipeable. Use the [canDismiss](https://ionicframework.com/docs/api/modal#preventing-a-modal-from-dismissing) property if you want to prevent a modal from dismissing.
2. Remove any code that sets the `canDismiss` property to `undefined`. The `canDismiss` property now defaults to `true`, so this code is no longer needed.
### Picker
1. Remove any code that accesses `refresh` on `ion-picker-column`. Developers should use the `columns` property on `ion-picker` to refresh the view instead.
### Searchbar
1. Update any code that accesses the `detail` payload for the `ionInput` event from `event.detail` to `event.detail.value` as the detail payload is now an object containing a value and an event.
### Segment
1. Remove any code that sets the `value` property to `null`. Developers should use either `''` or `undefined` instead.
### Slides
1. Remove `ion-slides`, `ion-slide`, and any associated types. These components have been removed in favor of using Swiper.js directly. The guides below contain more information about this migration:
[Angular Migration Guide](https://ionicframework.com/docs/angular/slides)<br />
[React Migration Guide](https://ionicframework.com/docs/react/slides)<br />
[Vue Migration Guide](https://ionicframework.com/docs/vue/slides)
### Textarea
1. Update any code that accesses the `detail` payload for the `ionInput` event from `event.detail` to `event.detail.value` as the detail payload is now an object containing a value and an event.
### Toggle
1. Rename any usages of the `--background` and `--background-checked` CSS Variables to `--track-background` and `--track-background-checked`, respectively.
### Virtual Scroll
1. Remove `ion-virtual-scroll` and any associated types. This component has been removed in favor of using virtual scroll solutions provided by JavaScript Frameworks. The guides below contain more information about this migration:
[Angular Migration Guide](https://ionicframework.com/docs/angular/virtual-scroll)<br />
[React Migration Guide](https://ionicframework.com/docs/react/virtual-scroll)<br />
[Vue Migration Guide](https://ionicframework.com/docs/vue/virtual-scroll)
## Need Help Upgrading?
Be sure to look at the [Ionic 7 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-7x). There were several changes to default property and CSS Variable values that developers may need to be aware of. Only the breaking changes that require user action are listed on this page.
If you need help upgrading, please post a thread on the [Ionic Forum](https://forum.ionicframework.com/).