# Ionic Angular Quickstart
URL: https://ionicframework.com/docs/v8/angular/quickstart
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, refer to the [Ionic Angular Overview](/docs/v8/angular/overview.md).
## Prerequisites
Before you begin, make sure you have Node.js and npm installed on your machine. You can check by running:
```shell
node -v
npm -v
```
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
First, install the latest [Ionic CLI](/docs/v8/cli.md):
```shell
npm install -g @ionic/cli
```
Then, run the following commands to create and run a new project:
```shell
ionic start myApp blank --type angular
cd myApp
ionic serve
```
At the first prompt, choose `Standalone`.
After running `ionic serve`, your project will open in the browser.
## Explore the Project Structure
Your new app's directory will look like this:
```shell
└── src/
└── app
├── app.component.html
├── app.component.scss
├── app.component.ts
├── app.routes.ts
└── home/
├── home.page.html
├── home.page.scss
├── home.page.spec.ts
└── home.page.ts
```
**Info**
All file paths in the examples below are relative to the project root directory.
Let's walk through these files to understand the app's structure.
## View the App Component
The root of your app is defined in `app.component.ts`:
src/app/app.component.ts
```ts
import { Component } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
imports: [IonApp, IonRouterOutlet],
})
export class AppComponent {
constructor() {}
}
```
And its template in `app.component.html`:
src/app/app.component.html
```html
```
This sets up the root of your application, using Ionic's `ion-app` and `ion-router-outlet` components. The router outlet is where your pages will be displayed.
## View Routes
Routes are defined in `app.routes.ts`:
src/app/app.routes.ts
```ts
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: 'home',
loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full',
},
];
```
When you visit the root URL (`/` ), the `HomePage` component will be loaded.
## View the Home Page
The Home page component, defined in `home.page.ts`, imports the Ionic components it uses:
src/app/home/home.page.ts
```ts
import { Component } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
imports: [IonHeader, IonToolbar, IonTitle, IonContent],
})
export class HomePage {
constructor() {}
}
```
And the template, in the `home.page.html` file, uses those components:
src/app/home/home.page.html
```html
Blank Blank
```
This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/v8/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, refer to the [Header](/docs/v8/api/header.md), [Toolbar](/docs/v8/api/toolbar.md), [Title](/docs/v8/api/title.md), and [Content](/docs/v8/api/content.md) documentation.
## Add an Ionic Component
You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/v8/api/button.md) at the end of the `ion-content`:
src/app/home/home.page.html
```html
Navigate
```
Then, import the `IonButton` component in `home.page.ts`:
src/app/home/home.page.ts
```ts
import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
@Component({
// ...existing config...
imports: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
})
```
## Add a New Page
To add a new page, generate it with the CLI:
```shell
ionic generate page new
```
A route will be automatically added to `app.routes.ts`.
In `new.page.html`, you can add a [Back Button](/docs/v8/api/back-button.md) to the [Toolbar](/docs/v8/api/toolbar.md):
src/app/new/new.page.html
```html
new
```
And import `IonBackButton` and `IonButtons` in `new.page.ts`:
src/app/new/new.page.ts
```ts
import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
@Component({
// ...existing config...
imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
})
```
The `ion-back-button` will automatically handle navigation back to the previous page, or to `/` if there is no history.
## Navigate to the New Page
To navigate to the new page, update the button in `home.page.html`:
src/app/home/home.page.html
```html
Navigate
```
Then, import `RouterLink` in `home.page.ts`:
src/app/home/home.page.ts
```ts
import { RouterLink } from '@angular/router';
@Component({
// ...existing config...
imports: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar, RouterLink],
})
```
**Info**
Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/docs/v8/angular/navigation.md#navigating-to-different-routes) for more information.
## Add Icons to the New Page
Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `name` property on the `ion-icon` component. Add the following icons to `new.page.html`:
src/app/new/new.page.html
```html
```
You'll also need to import and register these icons in `new.page.ts`:
src/app/new/new.page.ts
```ts
// ...existing imports...
import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { heart, logoIonic } from 'ionicons/icons';
@Component({
// ...existing config...
imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar],
})
```
Then, update the constructor of the page to use `addIcons`:
src/app/new/new.page.ts
```ts
export class NewPage implements OnInit {
constructor() {
addIcons({ heart, logoIonic });
}
ngOnInit() {}
}
```
Alternatively, you can register icons in `app.component.ts` to use them throughout your app.
For more information, refer to the [Icon documentation](/docs/v8/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
## Call Component Methods
Let's add a button that can scroll the content area to the bottom.
Update the `ion-content` in your `new.page.html` to include a button and some items after the existing icons:
src/app/new/new.page.html
```html
newScroll to Bottom
@for (item of items; track $index; let i = $index) {
Item {{ i + 1 }}
}
```
In the component, add the `ViewChild` import, the new component imports and define the `scrollToBottom` function:
src/app/new/new.page.ts
```ts
import { Component, OnInit, ViewChild } from '@angular/core';
import {
IonBackButton,
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonTitle,
IonToolbar,
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { heart, logoIonic } from 'ionicons/icons';
@Component({
// ...existing config...
imports: [
IonBackButton,
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonTitle,
IonToolbar,
],
})
export class NewPage implements OnInit {
@ViewChild(IonContent) content!: IonContent;
items = Array.from({ length: 50 }, (_, i) => i);
constructor() {
addIcons({ heart, logoIonic });
}
ngOnInit() {}
scrollToBottom = () => {
this.content.scrollToBottom(300);
};
}
```
To call methods on Ionic components:
1. Create a `ViewChild` reference for the component
2. Call the method directly on the component instance
You can find available methods for each component in the [Methods](/docs/v8/api/content.md#methods) section of their API documentation.
## Run on a Device
Ionic's components work everywhere: on iOS, Android, and PWAs. To deploy to mobile, use [Capacitor](https://capacitorjs.com):
```shell
ionic build
ionic cap add ios
ionic cap add android
```
Open the native projects in their IDEs:
```shell
ionic cap open ios
ionic cap open android
```
Refer to [Capacitor's Getting Started guide](https://capacitorjs.com/docs/getting-started/with-ionic) for more.
## Explore More
This guide covered the basics of creating an Ionic Angular app, adding navigation, and introducing Capacitor for native builds. To dive deeper, check out:
[ 
Build Your First App Build a real Photo Gallery app with Ionic Angular and native device features.](/docs/v8/angular/your-first-app.md) [ 
Angular Documentation Learn more about Angular's core concepts, tools, and best practices from the official Angular documentation.](https://angular.dev/overview) [ 
Navigation Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.](/docs/v8/angular/navigation.md) [ 
Components Explore Ionic's rich library of UI components for building beautiful apps.](/docs/components.md) [ 
Theming Learn how to customize the look and feel of your app with Ionic's powerful theming system.](/docs/theming/basics.md) [ 
Capacitor Documentation Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.](https://capacitorjs.com/docs/)