Skip to content

docs(guide): update the framework overview & quickstart guides #4212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 20 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
d34ef15
docs(guide): update framework overview files for consistency
brandyscarney Jul 22, 2025
a8addf3
chore(vercel): add redirects for framework slugs to their overview
brandyscarney Jul 22, 2025
aa8c2e6
fix(icons): update components icon
brandyscarney Jul 22, 2025
05f6530
docs(guide): update versioned overviews for angular and vue
brandyscarney Jul 23, 2025
7535b26
docs(guide): update versioned overviews for react
brandyscarney Jul 23, 2025
77b5d19
docs(guide): update quickstart image with updated starters view
brandyscarney Jul 23, 2025
21647a4
docs(guide): update overview to cd into app
brandyscarney Jul 24, 2025
6075642
chore(vercel): add redirects for overview for v6 and v7
brandyscarney Jul 24, 2025
8106cb5
Merge branch 'main' into bc/docs-overview-updates
brandyscarney Jul 24, 2025
bb33994
docs(angular): add quickstart guide and update overview
brandyscarney Aug 5, 2025
0150e53
docs(vue): update overview
brandyscarney Aug 5, 2025
2c05210
docs(react): update overview
brandyscarney Aug 5, 2025
3ee3711
docs(angular): update quickstart
brandyscarney Aug 5, 2025
0bdb14c
docs(react): update quickstart
brandyscarney Aug 5, 2025
55c0570
docs(vue): update quickstart
brandyscarney Aug 6, 2025
730a12a
docs(vue): quickstart updates
brandyscarney Aug 6, 2025
c5b06a4
style: lint
brandyscarney Aug 6, 2025
4aab3bf
docs(guide): syntax and title updates
brandyscarney Aug 7, 2025
4f9b716
docs(vue): add build options from quickstart
brandyscarney Aug 7, 2025
cb1c831
docs(quickstart): add Call Component Methods section and update paths
brandyscarney Aug 7, 2025
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
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
Loading