Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
130 commits
Select commit Hold shift + click to select a range
56e257c
docs(v6): update v6 stackblitz setup for Angular and JS
soundproofboot Jul 18, 2025
c625d4d
docs(v6): update Angular examples for accordion
soundproofboot Jul 21, 2025
b595e1e
docs(v6): update Angular examples for action-sheet
soundproofboot Jul 21, 2025
1170b47
docs(v6): update Angular examples for alert
soundproofboot Jul 21, 2025
fbbde06
docs(v6): update Angular examples for breadcrumbs
soundproofboot Jul 21, 2025
40e55c0
docs(v6): update Angular examples for content
soundproofboot Jul 21, 2025
9c37e15
docs(v6): update Angular examples for datetime
soundproofboot Jul 21, 2025
edf261f
docs(v6): update Angular examples for picker
soundproofboot Jul 21, 2025
e54bffb
docs(v6): update Angular examples for infinite-scroll
soundproofboot Jul 23, 2025
a27f649
docs(v6): update Angular example for icon
soundproofboot Jul 23, 2025
f6bbe3e
docs(v6): update Angular example for input
soundproofboot Jul 23, 2025
067d6aa
docs(v6): update Angular example for item
soundproofboot Jul 23, 2025
09130ff
docs(v6): update Angular examples for item
soundproofboot Jul 23, 2025
9af634d
docs(v6): update Angular example for menu
soundproofboot Jul 23, 2025
710cf89
docs(v6): update Angular examples for modal
soundproofboot Jul 23, 2025
89b3478
docs(v6): update Angular example for nav
soundproofboot Jul 23, 2025
b105668
docs(v6): update Angular examples for popover
soundproofboot Jul 23, 2025
b367f11
docs(v6): update Angular examples for loading
soundproofboot Jul 23, 2025
45666ff
docs(v6): update Angular examples for progress-bar
soundproofboot Jul 23, 2025
107b465
docs(v6): update Angular example for skeleton-text
soundproofboot Jul 23, 2025
47ef967
docs(v6): update Angular examples for range
soundproofboot Jul 23, 2025
dc66afa
docs(v6): update Angular examples for refresher
soundproofboot Jul 23, 2025
7eea39b
docs(v6): update Angular examples for reorder
soundproofboot Jul 23, 2025
1d609aa
docs(v6): update Angular examples for searchbar
soundproofboot Jul 23, 2025
143d9ef
docs(v6): update Angular examples for segment
soundproofboot Jul 23, 2025
34fcc9b
docs(v6): update Angular examples for segment-button
soundproofboot Jul 24, 2025
0501513
docs(v6): update Angular example for segment-button
soundproofboot Jul 24, 2025
626a46f
docs(v6): update Angular examples for select
soundproofboot Jul 24, 2025
d243ff3
docs(v6): update Angular example for router
soundproofboot Jul 24, 2025
2ee2ea9
docs(v6): update Angular examples for toast
soundproofboot Jul 24, 2025
5934210
docs(v6): update Angular examples for toolbar
soundproofboot Jul 25, 2025
28795fb
docs(v6): update Angular example for buttons
soundproofboot Jul 25, 2025
b9b4fd0
docs(v6): update Angular examples for back-button
soundproofboot Jul 25, 2025
f48db54
docs(v6): update Angular example for text
soundproofboot Jul 25, 2025
50c1e6f
docs(v6): revert changes required to build v6 docs locally
soundproofboot Jul 25, 2025
d49391b
docs(v6): run linter
soundproofboot Jul 25, 2025
362e902
docs(v6): update JavaScript example for icon
soundproofboot Jul 28, 2025
3ef6fd8
docs(v6): update JavaScript example for accordion
soundproofboot Jul 28, 2025
c3340ae
docs(v6): update JavaScript example for back-button
soundproofboot Jul 28, 2025
ec26bf2
docs(v6): update JavaScript examples for breadcrumbs
soundproofboot Jul 28, 2025
bf28ee7
docs(v6): update JavaScript example for buttons
soundproofboot Jul 30, 2025
f994a43
docs(v6): update JavaScript examples for item
soundproofboot Jul 30, 2025
1fdbb55
docs(v6): update JavaScript example for refresher
soundproofboot Jul 30, 2025
3f8b81e
docs(v6): update JavaScript example for reorder
soundproofboot Jul 30, 2025
12a2bc4
docs(v6): update JavaScript examples for searchbar
soundproofboot Jul 30, 2025
f28c3c7
docs(v6): update JavaScript examples for segment
soundproofboot Jul 30, 2025
9a04992
docs(v6): update JavaScript examples for segment-button
soundproofboot Jul 30, 2025
7fa5d9d
docs(v6): update JavaScript example for tabs
soundproofboot Jul 30, 2025
f7a8988
docs(v6): update JavaScript examples for text
soundproofboot Jul 30, 2025
7e67fc0
docs(v6): update JavaScript example for toast
soundproofboot Jul 30, 2025
f136105
docs(v6): update JavaScript example for toolbar
soundproofboot Jul 30, 2025
a722c87
revert changes required to build v6 docs locally
soundproofboot Jul 30, 2025
7853751
docs(v6): run linter
soundproofboot Jul 30, 2025
14f71e0
chore(deps): update dependency @types/node to v22.17.0 (#4233)
renovate[bot] Aug 4, 2025
6adebfb
chore(deps): update react monorepo to v19.1.9 (#4232)
renovate[bot] Aug 4, 2025
fd28a67
chore(deps): update dependency web-vitals to v5.1.0 (#4237)
renovate[bot] Aug 5, 2025
025ad77
chore(deps): update dependency vue-tsc to v3.0.5 (#4235)
renovate[bot] Aug 5, 2025
4e17d4b
chore(deps): update dependency typescript to v5.9.2 (#4236)
renovate[bot] Aug 5, 2025
6df374d
docs(migration): remove unused migration files (#4239)
brandyscarney Aug 5, 2025
63d4357
docs(storage): replace outdated or sunset products with active projec…
kensodemann Aug 5, 2025
688866a
chore(deps): update ionic to v8.7.2 (#4240)
renovate[bot] Aug 7, 2025
de08bf7
docs(radio): add example for wrapping label text (#4234)
soundproofboot Aug 8, 2025
171ba03
chore(deps): update dependency vite to v7.1.1 (#4245)
renovate[bot] Aug 11, 2025
bf9abc8
chore(deps): update dependency vite to v7.1.1 (#4246)
renovate[bot] Aug 11, 2025
3aa3b4d
chore(deps): update dependency @vitejs/plugin-react to v5 (#4247)
renovate[bot] Aug 11, 2025
51ac3c3
docs(radio): point to correct v7 usage for comparewith (#4241)
brandyscarney Aug 11, 2025
c343066
chore(deps): update dependency @types/node to v22.17.1 (#4248)
renovate[bot] Aug 12, 2025
a671955
chore(deps): update dependency vite to v7.1.2 (#4251)
renovate[bot] Aug 15, 2025
b185708
chore(deps): update dependency vite to v7.1.2 (#4250)
renovate[bot] Aug 15, 2025
53eac82
chore(deps): update dependency @types/react to v19.1.10 (#4249)
renovate[bot] Aug 15, 2025
47e2f8d
chore(deps): update dependency @types/node to v22.17.2 (#4253)
renovate[bot] Aug 18, 2025
10ac395
docs(first-app): fixing PuTTY links (#4254)
ShaneK Aug 18, 2025
337021d
chore(deps): update ionic to v8.7.3 (#4255)
renovate[bot] Aug 21, 2025
977b662
chore(deps): update dependency @vitejs/plugin-react to v5.0.1 (#4256)
renovate[bot] Aug 22, 2025
1bdf425
chore(deps): update dependency vue to v3.5.19 (#4259)
renovate[bot] Aug 25, 2025
1f2c43a
chore(deps): update dependency vue-tsc to v3.0.6 (#4260)
renovate[bot] Aug 25, 2025
70a9b32
chore(deps): update dependency vite to v7.1.3 (#4257)
renovate[bot] Aug 25, 2025
aeab6d6
chore(deps): update dependency vite to v7.1.3 (#4258)
renovate[bot] Aug 25, 2025
8a73693
chore(deps): update dependency @types/react to v19.1.11 (#4262)
renovate[bot] Aug 26, 2025
29132d1
docs(playgrounds): upgrade to typescript 5.9.0 (#4263)
brandyscarney Sep 5, 2025
c7eb606
chore(deps): update ionic to v8.7.4 (#4273)
renovate[bot] Sep 18, 2025
ed26fea
docs(vue): update all script syntax to use setup (#4242)
brandyscarney Sep 24, 2025
6f02b4a
docs(guide): add properties section to fundamentals and virtual prope…
kkindrai Sep 24, 2025
5034dee
chore(deps): update ionic to v8.7.5 (#4274)
renovate[bot] Sep 25, 2025
70db0de
docs(guide): update the framework overview & quickstart guides (#4212)
brandyscarney Sep 29, 2025
5922a9e
chore(jp): migrate script to mjs (#3481)
sean-perkins Sep 29, 2025
700b805
docs(guide): update framework logos (#4276)
brandyscarney Oct 2, 2025
5364f10
Update static/code/stackblitz/v6/angular/app.routes.ts
soundproofboot Oct 4, 2025
7c80e46
Update static/code/stackblitz/v6/angular/main.ts
soundproofboot Oct 4, 2025
763216f
chore(deps): update caniuselite browserslist (#4278)
brandyscarney Oct 7, 2025
af454de
chore(deps): update ionic to v8.7.6 (#4280)
renovate[bot] Oct 9, 2025
9899fb6
docs(guide): add javascript section with overview and quickstart page…
joesphchang Oct 13, 2025
f2f9305
docs(playgrounds): update playgrounds to include default package-lock…
brandyscarney Oct 15, 2025
5e652b8
docs(your-first-app): update instructions for photo deletion function…
mwilman Oct 15, 2025
048c126
chore(deps): update ionic to v8.7.7 (#4284)
renovate[bot] Oct 16, 2025
f67cce2
chore(deps): update vite-html (#4290)
renovate[bot] Oct 20, 2025
de237bc
chore(deps): update dependency vite to v7.1.10 (#4289)
renovate[bot] Oct 20, 2025
045348e
chore(deps): update dependency vite to v7.1.10 (#4288)
renovate[bot] Oct 20, 2025
962ad99
chore(deps): update dependency vue-router to v4.6.3 (#4291)
renovate[bot] Oct 20, 2025
d3ee835
chore(deps): update dependency @types/node to v22.18.11 (#4287)
renovate[bot] Oct 20, 2025
2f3b8cf
chore(deps): update dependency vite to v7.1.11 [security] (#4292)
renovate[bot] Oct 20, 2025
0138aee
docs(guide): update framework logos on progressive web app guide (#4293)
brandyscarney Oct 23, 2025
3807e25
chore(deps): update dependency @types/node to v22.18.12 (#4294)
renovate[bot] Oct 24, 2025
378ef5e
chore(deps): update dependency vue-tsc to v3.1.2 (#4298)
renovate[bot] Oct 28, 2025
42ed6cd
chore(deps): update dependency @types/node to v24 (#4299)
renovate[bot] Oct 28, 2025
1672e1b
chore(deps): update dependency vite to v7.1.12 (#4297)
renovate[bot] Oct 28, 2025
a675df6
chore(deps): update dependency vite to v7.1.12 (#4296)
renovate[bot] Oct 28, 2025
c14530c
chore(deps): update dependency vite to v7.1.12 (#4295)
renovate[bot] Oct 28, 2025
a9261bf
chore(deps): update dependency @vitejs/plugin-react to v5.1.0 (#4300)
renovate[bot] Oct 29, 2025
aed2269
chore(deps): update ionic to v8.7.8 (#4301)
renovate[bot] Oct 30, 2025
f2a243e
chore(deps): update dependency @types/node to v24.9.2 (#4305)
renovate[bot] Nov 3, 2025
89df869
chore(deps): update angular to v20.3.7 (#4304)
renovate[bot] Nov 3, 2025
22eaa1f
chore(deps): update dependency @types/node to v24.10.0 (#4308)
renovate[bot] Nov 6, 2025
ef01ec1
chore(deps): update dependency vue-tsc to v3.1.3 (#4310)
renovate[bot] Nov 6, 2025
34d0b57
chore(deps): update ionic to v8.7.9 (#4307)
renovate[bot] Nov 6, 2025
2a9ce6a
chore(deps): update dependency vite to v7.2.1 (#4314)
renovate[bot] Nov 10, 2025
1890b10
chore(deps): update dependency vite to v7.2.1 (#4315)
renovate[bot] Nov 10, 2025
5e9e5ed
chore(deps): update dependency vite to v7.2.1 (#4313)
renovate[bot] Nov 10, 2025
8eb9e4e
chore(deps): update dependency vue to v3.5.23 (#4312)
renovate[bot] Nov 10, 2025
aa5eb05
style: remove extra :
brandyscarney Nov 7, 2025
f160b6f
chore: deploy v6
brandyscarney Nov 10, 2025
3b2d29c
Merge branch 'main' into pr/4213
brandyscarney Nov 10, 2025
ea1f636
test(angular): add package-lock for v6
brandyscarney Nov 10, 2025
b428b73
docs(angular): add the modal nav playground and get working
brandyscarney Nov 10, 2025
57622f4
docs(angular): remove unneeded variable
brandyscarney Nov 10, 2025
194ba23
docs(angular): update tabs router example to use tab props
brandyscarney Nov 10, 2025
d030080
docs(html): add package-lock for v6
brandyscarney Nov 10, 2025
9bd9c16
style: lint
brandyscarney Nov 10, 2025
305a699
chore: update v6 link and remove from deployment
brandyscarney Nov 11, 2025
bcb6d49
style: remove extra /
brandyscarney Nov 11, 2025
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
  •  
  •  
  •  
9 changes: 1 addition & 8 deletions _templates/playground/new/vue.md.ejs.t
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,8 @@ to: "<%= `static/usage/v${version}/${name}/${path}/vue.md` %>"
<<%= component %>></<%= component %>>
</template>

<script lang="ts">
<script setup lang="ts">
import { <%= pascalComponent %> } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: {
<%= pascalComponent %>,
},
});
</script>
<% if (css){ -%>

Expand Down
49 changes: 37 additions & 12 deletions docs/angular/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,33 +14,58 @@ sidebar_label: Overview
import DocsCard from '@components/global/DocsCard';
import DocsCards from '@components/global/DocsCards';

`@ionic/angular` combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers.
`@ionic/angular` brings the full power of the Ionic Framework to Angular developers. It offers seamless integration with the Angular ecosystem, so you can build high-quality cross-platform apps using familiar Angular tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities.

## Angular Version Support

Ionic v7 supports Angular v14+. As part of their upgrade strategy, Angular has built-in tooling to help automate upgrades and provide feedback to developers whenever changes to an API occurred. This reduces update friction and keeps the ecosystem in a evergreen state.
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).

## Angular Tooling

With Ionic 4+, the official Angular stack for building an app and routing are used, so your app can fall in-line with the rest of the great Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps.
Ionic uses the official Angular stack for building apps and routing, so your app can fall in line with the rest of the Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps.

## Native Tooling

[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Angular, enabling your apps to run natively on iOS, Android, and the web with a single codebase.

## Installation

Before you begin, make sure you have [Node.js](https://nodejs.org/) (which includes npm) installed on your machine.

```shell-session
$ npm install -g @ionic/cli
$ ionic start myApp tabs --type angular

$ cd myApp
$ ionic serve █
```

## Resources

<DocsCards>
<DocsCard header="Getting Started" href="your-first-app" icon="/icons/feature-component-actionsheet-icon.png">
<p>Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.</p>
</DocsCard>

<DocsCard header="Navigation" href="navigation" icon="/icons/feature-component-navigation-icon.png">
<p>Learn the basics of navigation inside your app with Ionic and Angular Router</p>
<DocsCard header="Getting Started" href="quickstart" icon="/icons/guide-quickstart-icon.png">
<p>Quickly set up your first Ionic Angular app and learn the basics of the framework and CLI.</p>
</DocsCard>

<DocsCard header="Angular Documentation" href="https://angular.dev/overview" icon="/icons/logo-angular-icon.png">
<p>Learn more about Angular's core concepts, tools, and best practices from the official Angular documentation.</p>
</DocsCard>

<DocsCard header="Navigation" href="navigation" icon="/icons/component-navigation-icon.png">
<p>Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.</p>
</DocsCard>

<DocsCard header="Components" href="/docs/components" icon="/icons/guide-components-icon.png">
<p>Explore Ionic's rich library of UI components for building beautiful apps.</p>
</DocsCard>

<DocsCard header="Lifecycle" href="lifecycle" icon="/icons/feature-guide-components-icon.png">
<p>Learn about using Ionic lifecycle events in class components and with hooks</p>
<DocsCard header="Theming" href="/docs/theming/basics" icon="/icons/guide-theming-icon.png">
<p>Learn how to customize the look and feel of your app with Ionic's powerful theming system.</p>
</DocsCard>

<DocsCard header="Build Options" href="build-options" icon="/icons/logo-angular-icon.png">
<p>Learn about using Modules or Standalone Components in Ionic.</p>
<DocsCard header="Capacitor Documentation" href="https://capacitorjs.com/docs/" icon="/icons/guide-capacitor-icon.png">
<p>Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.</p>
</DocsCard>

</DocsCards>
Loading