ionic-team · thetaPC · Nov 17, 2025 · Jun 13, 2025 · Jun 13, 2025 · Jun 13, 2025
@@ -4,10 +4,10 @@ sidebar_label: Build Your First App
 ---
 
 <head>
- <title>Build Your First Ionic Mobile App: Angular Development Tutorial</title>
+ <title>Build Your First Ionic Mobile App with Angular | Ionic Capacitor Camera</title>
  <meta
  name="description"
- content="Ionic's single codebase builds for any platform using just HTML, CSS, & JavaScript. Develop your first mobile app with our step-by-step Angular tutorial."
+ content="This Angular tutorial teaches the fundamentals of Ionic app development by creating a realistic app step-by-step. Learn to run your first Ionic app with Angular."
  />
 </head>
 
@@ -34,11 +34,11 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
+- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
+- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
 
-Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng).
+Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-angular) referenced in this guide on GitHub.
 
 ## Download Required Tools
 
@@ -47,9 +47,8 @@ Download and install these right away to ensure an optimal Ionic development exp
 - **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
 - **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
 - **Command-line interface/terminal (CLI)**:
- - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell
- CLI, running in Administrator mode.
- - **Mac/Linux** users, virtually any terminal will work.
+ - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode.
+ - **Mac/Linux** users: virtually any terminal will work.
 
 ## Install Ionic Tooling
 
@@ -71,10 +70,10 @@ Consider setting up npm to operate globally without elevated permissions. See [R
 
 ## Create an App
 
-Next, create an Ionic Angular app that uses the “Tabs” starter template and adds Capacitor for native functionality:
+Next, create an Ionic Angular app that uses the "Tabs" starter template and adds Capacitor for native functionality:
 
 ```shell
-ionic start photo-gallery tabs --type=angular --capacitor
+ionic start photo-gallery tabs --type=angular
 ```
 
 :::note
@@ -99,7 +98,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 
 ### PWA Elements
 
-Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/ionic-pwa-elements).
+Some Capacitor plugins, including the [Camera API](../native/camera.md), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
 
 It's a separate dependency, so install it next:
 
@@ -109,11 +108,18 @@ npm install @ionic/pwa-elements
 
 Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
 
-```tsx
+```ts
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+// CHANGE: Add the following import
 import { defineCustomElements } from '@ionic/pwa-elements/loader';
 
-// Call the element loader before the bootstrapModule/bootstrapApplication call
+// CHANGE: Call the element loader before the `bootstrapModule` call
 defineCustomElements(window);
+
+platformBrowserDynamic()
+ .bootstrapModule(AppModule)
+ .catch((err) => console.log(err));
 ```
 
 That’s it! Now for the fun part - let’s see the app in action.
@@ -128,55 +134,105 @@ ionic serve
 
 And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.
 
-## Photo Gallery!!!
+## Photo Gallery
 
-There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
+There are three tabs. Click on the "Tab2" tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
 
 ![Animated GIF showing the live reload feature in an Ionic app, with changes in code immediately updating the app in a web browser.](/img/guides/first-app-cap-ng/email-photogallery.gif 'Live Reload Feature in Ionic App')
 
-Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
+Open `/src/app/tab2/tab2.page.html`. We see:
 
 ```html
-<ion-header>
+<ion-header [translucent]="true">
  <ion-toolbar>
- <ion-title>Tab 2</ion-title>
+ <ion-title>Tab 2</ion-title>
  </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
  <ion-toolbar>
  <ion-title size="large">Tab 2</ion-title>
  </ion-toolbar>
  </ion-header>
+
+ <app-explore-container name="Tab 2 page"></app-explore-container>
 </ion-content>
 ```
 
-`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](https://ionicframework.com/docs/api/title#collapsible-large-titles) support). Rename both `ion-title` elements to:
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Rename both `ion-title` elements to:
 
 ```html
-<ion-title>Photo Gallery</ion-title>
+<ion-header [translucent]="true">
+ <ion-toolbar>
+ <!-- CHANGE: Update title -->
+ <ion-title> Photo Gallery </ion-title>
+ </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+ <ion-header collapse="condense">
+ <ion-toolbar>
+ <!-- CHANGE: Update title -->
+ <ion-title size="large">Photo Gallery</ion-title>
+ </ion-toolbar>
+ </ion-header>
+
+ <app-explore-container name="Tab 2 page"></app-explore-container>
+</ion-content>
 ```
 
-We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB) to the bottom of the page and set the camera image as the icon.
+We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```html
+<ion-header [translucent]="true">
+ <ion-toolbar>
+ <ion-title>Photo Gallery</ion-title>
+ </ion-toolbar>
+</ion-header>
+
 <ion-content>
+ <ion-header collapse="condense">
+ <ion-toolbar>
+ <ion-title size="large">Photo Gallery</ion-title>
+ </ion-toolbar>
+ </ion-header>
+
+ <!-- CHANGE: Add the floating action button -->
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
  <ion-fab-button>
  <ion-icon name="camera"></ion-icon>
  </ion-fab-button>
  </ion-fab>
+
+ <!-- CHANGE: Remove or comment out `app-explore-container` -->
+ <!-- <app-explore-container name="Tab 2 page"></app-explore-container> -->
 </ion-content>
 ```
 
-Next, open `src/app/tabs/tabs.page.html`. Change the label to “Photos” and the icon name to “images”:
+Next, open `src/app/tabs/tabs.page.html`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.
 
 ```html
-<ion-tab-button tab="tab2">
- <ion-icon name="images"></ion-icon>
- <ion-label>Photos</ion-label>
-</ion-tab-button>
+<ion-tabs>
+ <ion-tab-bar slot="bottom">
+ <ion-tab-button tab="tab1" href="/tabs/tab1">
+ <ion-icon aria-hidden="true" name="triangle"></ion-icon>
+ <ion-label>Tab 1</ion-label>
+ </ion-tab-button>
+
+ <ion-tab-button tab="tab2" href="/tabs/tab2">
+ <!-- CHANGE: Update icon -->
+ <ion-icon aria-hidden="true" name="images"></ion-icon>
+ <!-- CHANGE: Update label -->
+ <ion-label>Photos</ion-label>
+ </ion-tab-button>
+
+ <ion-tab-button tab="tab3" href="/tabs/tab3">
+ <ion-icon aria-hidden="true" name="square"></ion-icon>
+ <ion-label>Tab 3</ion-label>
+ </ion-tab-button>
+ </ion-tab-bar>
+</ion-tabs>
 ```
 
-Save all changes to see them automatically applied in the browser. That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.
+That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.