docs(angular): show complete code context in the "Your First App" tutorial #4157

soundproofboot · 2025-06-17T18:22:56Z

resolves #2082

Changes:

Update code blocks and text for the Angular Photo App tutorial to show additional context for each step with comments to indicate new lines.

Preview

…t ngFor in 2-taking-photos.md

…ck to 3-saving-photos.md

…-loading-photos.md

…ile.md

vercel · 2025-06-17T18:23:00Z

@soundproofboot is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2025-06-18T19:32:19Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ionic-docs	Ready	Preview	Comment	Oct 31, 2025 0:38am

thetaPC

We should also update Page 7 Live reload to include more complete code.

docs/angular/your-first-app.md

docs/angular/your-first-app/5-adding-mobile.md

Co-authored-by: Maria Hutt <[email protected]>

Fixed typo in the congratulations message regarding user devices.

brandyscarney

@thetaPC I left some comments with requested changes. In many of these cases the code appears in more than the one place I commented. Additionally, we should probably make the same changes across all 3 PRs (React & Vue).

The only major change I would request is to convert this to follow a Standalone app.

Note: I did not do a thorough code review due to the possibility of converting this to Standalone. I will do that after all requested changes are made.

docs/angular/your-first-app.md

docs/angular/your-first-app/8-distribute.md

docs/angular/your-first-app.md

docs/angular/your-first-app/6-deploying-mobile.md

docs/angular/your-first-app/7-live-reload.md

brandyscarney · 2025-10-29T20:14:21Z

docs/angular/your-first-app/7-live-reload.md

+
+  <ion-grid>
+    <ion-row>
+      <ion-col size="6" *ngFor="let photo of photoService.photos; index as position">


We should not be using ngFor, the new way is to use @for: https://angular.dev/api/core/@for

@thetaPC You can ignore this feedback too - let's just do it on the standalone conversion.

Co-authored-by: Brandy Smith <[email protected]>

brandyscarney

I went through the process of creating an app following these guides and only ran into a couple of issues which I requested changes on. Any changes made for v8 also need to be made for v7 but I didn't request in both places. 👍

brandyscarney · 2025-11-04T16:34:39Z

docs/angular/your-first-app/2-taking-photos.md

+import { Preferences } from '@capacitor/preferences';
+
+export class PhotoService {


Suggested change

import { Preferences } from '@capacitor/preferences';

export class PhotoService {

import { Preferences } from '@capacitor/preferences';

@Injectable({

providedIn: 'root'

})

export class PhotoService {

Without this here, I see the following error when I go to tab 2:

It seems confusing to not include it when the imports are included.

brandyscarney · 2025-11-04T16:44:30Z

docs/angular/your-first-app/4-loading-photos.md

 ```

-On mobile (coming up next!), we can directly set the source of an image tag - `<img src="http://github.com/x" />` - to each photo file on the Filesystem, displaying them automatically. On the web, however, we must read each image from the Filesystem into base64 format, using a new `base64` property on the `Photo` object. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Below is the code you need to add in the `loadSaved()` function you just added:
+`photo.service.ts` should now look like this:


The code below this does not match what is actually in the file. The loadSaved function is missing what we added in the previous step.

brandyscarney · 2025-11-04T16:48:30Z

docs/angular/your-first-app/4-loading-photos.md

+    // CHANGE: Display the photo by reading into base64 format
+    for (let photo of this.photos) {
+      // Read each saved photo's data from the Filesystem
+      const file = await Filesystem.file({
+        path: photo.filepath,
+        directory: Directory.Data,
+      });
+
+      // Web platform only: Load the photo as base64 data
+      photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
+    }
+  }


Suggested change

// CHANGE: Display the photo by reading into base64 format

for (let photo of this.photos) {

// Read each saved photo's data from the Filesystem

const file = await Filesystem.file({

path: photo.filepath,

directory: Directory.Data,

});

// Web platform only: Load the photo as base64 data

photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;

}

}

// CHANGE: Display the photo by reading into base64 format

for (let photo of this.photos) {

// Read each saved photo's data from the Filesystem

const readFile = await Filesystem.readFile({

path: photo.filepath,

directory: Directory.Data,

});

// Web platform only: Load the photo as base64 data

photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;

}

}

This code errors.

brandyscarney · 2025-11-04T17:00:34Z

docs/angular/your-first-app/5-adding-mobile.md

    for (let photo of this.photos) {
-      // Read each saved photo's data from the Filesystem
-      const readFile = await Filesystem.readFile({
+      const file = await Filesystem.file({


Suggested change

const file = await Filesystem.file({

const readFile = await Filesystem.readFile({

This code throws an error

brandyscarney · 2025-11-04T17:00:46Z

docs/angular/your-first-app/5-adding-mobile.md


      // Web platform only: Load the photo as base64 data
-      photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
+      photo.webviewPath = `data:image/jpeg;base64,${file.data}`;


Suggested change

photo.webviewPath = `data:image/jpeg;base64,${file.data}`;

photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;

See above comment

brandyscarney · 2025-11-04T17:01:58Z

docs/angular/your-first-app/5-adding-mobile.md

+        const file = await Filesystem.file({
+          path: photo.filepath,
+          directory: Directory.Data,
+        });
+        // Web platform only: Load the photo as base64 data
+        photo.webviewPath = `data:image/jpeg;base64,${file.data}`;


Suggested change

const file = await Filesystem.file({

path: photo.filepath,

directory: Directory.Data,

});

// Web platform only: Load the photo as base64 data

photo.webviewPath = `data:image/jpeg;base64,${file.data}`;

const readFile = await Filesystem.readFile({

path: photo.filepath,

directory: Directory.Data,

});

// Web platform only: Load the photo as base64 data

photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;

See above comment

brandyscarney · 2025-11-04T18:07:09Z

docs/angular/your-first-app/7-live-reload.md

+    });
+
+    // Delete photo file from filesystem
+    const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);


Suggested change

const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);

const filename = photo.filepath.slice(photo.filepath.lastIndexOf('/') + 1);

substr is deprecated - optional change since it is in the final code

brandyscarney · 2025-11-04T21:06:42Z

docs/angular/your-first-app/8-distribute.md

Do we want to keep this guide since Appflow has been discontinued? Maybe update it to point to other offerings?

Do you have a suggestion to where to point it to? I would rather us not mention Appflow.

soundproofboot added 6 commits June 13, 2025 13:14

docs(angular): add context to code blocks in your-first-app page

9c0859d

docs(angular): add context to code blocks and note to learn more abou…

e979ea8

…t ngFor in 2-taking-photos.md

docs(angular): add context to method definitions, additional code blo…

67d1164

…ck to 3-saving-photos.md

docs(angular): add context in code blocks, clarity, storage note in 4…

ebb2a94

…-loading-photos.md

docs(angular): add context and clarity to code blocks in 5-adding-mob…

2660f4c

…ile.md

docs(angular): ran linter to format changes to angular walk through

08cf534

soundproofboot requested a review from a team as a code owner June 17, 2025 18:22

soundproofboot requested a review from gnbm June 17, 2025 18:22

vercel bot deployed to Preview June 18, 2025 19:35 View deployment

brandyscarney changed the title ~~docs(angular): "Your First App" tutorial should show complete code context(#2082)~~ docs(angular): show complete code context in the "Your First App" tutorial Jun 23, 2025

brandyscarney requested review from thetaPC and removed request for gnbm June 23, 2025 15:28

thetaPC requested changes Jun 25, 2025

View reviewed changes

soundproofboot and others added 15 commits June 26, 2025 09:19

docs(angular): update code comment

19727c5

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

925be88

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

8311b56

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

dbba4e2

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

6a93709

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

6fb2f87

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

0bf8977

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

954c32b

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

318444e

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

2b7b188

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

3a30866

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

1a83529

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

9c926b4

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

082bdef

Co-authored-by: Maria Hutt <[email protected]>

docs(angular): update code comment

ae805bb

Co-authored-by: Maria Hutt <[email protected]>

vercel bot deployed to Preview October 23, 2025 22:45 View deployment

thetaPC added 3 commits October 23, 2025 18:20

docs(angular): update adding mobile page

8cbe764

docs(angular): use correct method

77848e5

docs(angular): update live reload page

7714f0e

vercel bot deployed to Preview October 24, 2025 23:11 View deployment

docs(angular): update the your first app pages

dc6764c

vercel bot deployed to Preview October 25, 2025 00:04 View deployment

thetaPC and others added 2 commits October 28, 2025 16:42

docs(angular): update your first app pages

49210d3

Merge branch 'main' into angularPhotoGalleryCodeContext

5b41def

vercel bot deployed to Preview October 28, 2025 23:45 View deployment

Correct typo in deployment message

a4e4db6

Fixed typo in the congratulations message regarding user devices.

vercel bot deployed to Preview October 28, 2025 23:57 View deployment

docs(angular): update your first app pages for v7

c3a34a9

vercel bot deployed to Preview October 29, 2025 19:54 View deployment

brandyscarney reviewed Oct 29, 2025

View reviewed changes

thetaPC and others added 12 commits October 30, 2025 16:57

docs(angular): update distribute pages

899f1ea

docs(angular): remove first header

4d23054

docs(angular): update your first app pages

c0d4ea8

docs(angular): update taking photos pages

cc3843f

docs(angular): change wording

1e4305e

docs(angular): change existing code text

32c1a4b

docs(angular): remove periods and add ()

f178e08

docs(angular): move note

3139c48

docs(angular): add deployment word

7e46c17

docs(angular): change to important

1122ed6

Update docs/angular/your-first-app/7-live-reload.md

c0b36f1

Co-authored-by: Brandy Smith <[email protected]>

Update docs/angular/your-first-app/5-adding-mobile.md

a55294f

Co-authored-by: Brandy Smith <[email protected]>

thetaPC requested a review from brandyscarney October 31, 2025 00:37

vercel bot deployed to Preview October 31, 2025 00:38 View deployment

brandyscarney reviewed Nov 4, 2025

View reviewed changes

		import { Preferences } from '@capacitor/preferences';

		export class PhotoService {

	const file = await Filesystem.file({
	const readFile = await Filesystem.readFile({

	photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
	photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;

	const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
	const filename = photo.filepath.slice(photo.filepath.lastIndexOf('/') + 1);

docs(angular): show complete code context in the "Your First App" tutorial #4157

Are you sure you want to change the base?

docs(angular): show complete code context in the "Your First App" tutorial #4157

Conversation

soundproofboot commented Jun 17, 2025 • edited by thetaPC Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Jun 17, 2025

Uh oh!

vercel bot commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thetaPC left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

soundproofboot commented Jun 17, 2025 •

edited by thetaPC

Loading

vercel bot commented Jun 18, 2025 •

edited

Loading