Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
747bdbe
docs(javascript): added overview and ionic-core page
joesphchang Jul 25, 2025
97cb601
docs(javascript): ran npm run lint
joesphchang Jul 31, 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
16342aa
Merge branch 'main' into pr/4226
brandyscarney Sep 29, 2025
0d0e2ee
feat(javascript): update overview to match others and add JS logo
brandyscarney Sep 29, 2025
2139b34
refactor(javascript): move ionic-core to quickstart
brandyscarney Sep 29, 2025
3ed1139
refactor(javascript): update quickstart to match other framework flows
brandyscarney Sep 30, 2025
e5495eb
docs(javascript): update quickstart links and logos
brandyscarney Oct 1, 2025
d035d6b
docs(javascript): update guide to work with lazy loaded components
brandyscarney Oct 10, 2025
9cff186
style: lint
brandyscarney Oct 10, 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