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

Author: soundproofboot

docs/angular/your-first-app.md

@@ -117,8 +117,9 @@ import { defineCustomElements } from '@ionic/pwa-elements/loader'; // Added impo
 // Call the element loader before the bootstrapModule/bootstrapApplication call
 defineCustomElements(window);
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.log(err));
 ```
 
 That’s it! Now for the fun part - let’s see the app in action.
@@ -144,9 +145,7 @@ Open the photo-gallery app folder in your code editor of choice, then navigate t
 ```html
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <ion-title> Tab 2 </ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -172,9 +171,7 @@ We put the visual aspects of our app into `<ion-content>`. In this case, it’s
 ```html
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <ion-title> Tab 2 </ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -201,7 +198,6 @@ Next, open `src/app/tabs/tabs.page.html`. Change the label to “Photos” and t
 
 ```html
 <ion-tabs>
-
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
       <ion-icon aria-hidden="true" name="triangle"></ion-icon>
@@ -220,7 +216,6 @@ Next, open `src/app/tabs/tabs.page.html`. Change the label to “Photos” and t
       <ion-label>Tab 3</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
-
 </ion-tabs>
 ```
 

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

@@ -53,18 +53,17 @@ import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Preferences } from '@capacitor/preferences';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class PhotoService {
-
-  constructor() { }
+  constructor() {}
 
   public async addNewToGallery() {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({
       resultType: CameraResultType.Uri,
       source: CameraSource.Camera,
-      quality: 100
+      quality: 100,
     });
   }
 }
@@ -83,9 +82,8 @@ import { PhotoService } from '../services/photo.service';
   standalone: false,
 })
 export class Tab2Page {
-
   // update constructor to include photoService
-  constructor(public photoService: PhotoService) { }
+  constructor(public photoService: PhotoService) {}
 
   // add addNewToGallery method
   addPhotoToGallery() {
@@ -99,9 +97,7 @@ Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the
 ```html
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <ion-title> Tab 2 </ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -118,7 +114,6 @@ Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the
       <ion-icon name="camera"></ion-icon>
     </ion-fab-button>
   </ion-fab>
-
 </ion-content>
 ```
 
@@ -147,7 +142,7 @@ Back at the top of the `PhotoService` class definition, define an array of Photo
 export class PhotoService {
   public photos: UserPhoto[] = [];
 
-  constructor() { }
+  constructor() {}
 
   // other code
 }
@@ -170,6 +165,7 @@ public async addNewToGallery() {
   });
 }
 ```
+
 `photo.service.ts` should now look like this:
 
 ```tsx
@@ -179,23 +175,23 @@ import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Preferences } from '@capacitor/preferences';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class PhotoService {
   public photos: UserPhoto[] = [];
-  constructor() { }
+  constructor() {}
 
   public async addNewToGallery() {
     const capturedPhoto = await Camera.getPhoto({
       resultType: CameraResultType.Uri,
       source: CameraSource.Camera,
-      quality: 100
+      quality: 100,
     });
 
     // add new photo to photos array
     this.photos.unshift({
-      filepath: "soon...",
-      webviewPath: capturedPhoto.webPath!
+      filepath: 'soon...',
+      webviewPath: capturedPhoto.webPath!,
     });
   }
 }
@@ -205,14 +201,13 @@ export interface UserPhoto {
   webviewPath?: string;
 }
 ```
+
 Next, move over to `tab2.page.html` so we can display the image on the screen. Add a [Grid component](https://ionicframework.com/docs/api/grid) so that each photo will display nicely as photos are added to the gallery, and loop through each photo in the `PhotoServices`'s Photos array, adding an Image component (`<ion-img>`) for each. Point the `src` (source) at the photo’s path:
 
 ```html
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <ion-title> Tab 2 </ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -238,9 +233,9 @@ Next, move over to `tab2.page.html` so we can display the image on the screen. A
       <ion-icon name="camera"></ion-icon>
     </ion-fab-button>
   </ion-fab>
-
 </ion-content>
 ```
+
 :::note
 Learn more about the [ngFor core directive](https://blog.angular-university.io/angular-2-ngfor/).
 :::

docs/angular/your-first-app/3-saving-photos.md

@@ -86,17 +86,17 @@ import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Preferences } from '@capacitor/preferences';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class PhotoService {
   public photos: UserPhoto[] = [];
-  constructor() { }
+  constructor() {}
 
   public async addNewToGallery() {
     const capturedPhoto = await Camera.getPhoto({
       resultType: CameraResultType.Uri,
       source: CameraSource.Camera,
-      quality: 100
+      quality: 100,
     });
 
     // Save the picture and add it to photo collection
@@ -114,14 +114,14 @@ export class PhotoService {
     const savedFile = await Filesystem.writeFile({
       path: fileName,
       data: base64Data,
-      directory: Directory.Data
+      directory: Directory.Data,
     });
 
     // Use webPath to display the new image instead of base64 since it's
     // already loaded into memory
     return {
       filepath: fileName,
-      webviewPath: photo.webPath
+      webviewPath: photo.webPath,
     };
   }
 
@@ -130,25 +130,27 @@ export class PhotoService {
     const response = await fetch(photo.webPath!);
     const blob = await response.blob();
 
-    return await this.convertBlobToBase64(blob) as string;
+    return (await this.convertBlobToBase64(blob)) as string;
   }
 
-  private convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onerror = reject;
-    reader.onload = () => {
+  private convertBlobToBase64 = (blob: Blob) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onerror = reject;
+      reader.onload = () => {
         resolve(reader.result);
-    };
-    reader.readAsDataURL(blob);
-  });
+      };
+      reader.readAsDataURL(blob);
+    });
 }
 
 export interface UserPhoto {
   filepath: string;
   webviewPath?: string;
 }
 ```
+
 Obtaining the camera photo as base64 format on the web appears to be a bit trickier than on mobile. In reality, we’re just using built-in web APIs: [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) as a neat way to read the file into blob format, then FileReader’s [readAsDataURL()](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) to convert the photo blob to base64.
 
 There we go! Each time a new photo is taken, it’s now automatically saved to the filesystem. Next up, we'll load and display our saved images
-when the user navigates to the Photos tab.
+when the user navigates to the Photos tab.

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

@@ -74,6 +74,7 @@ for (let photo of this.photos) {
   photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
 }
 ```
+
 After these updates to the `PhotoService` class, your `photos.service.ts` file should look like this:
 
 ```tsx
@@ -83,9 +84,8 @@ import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Preferences } from '@capacitor/preferences';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
-
 export class PhotoService {
   public photos: UserPhoto[] = [];
   private PHOTO_STORAGE = 'photos';
@@ -139,14 +139,14 @@ export class PhotoService {
     const savedFile = await Filesystem.writeFile({
       path: fileName,
       data: base64Data,
-      directory: Directory.Data
+      directory: Directory.Data,
     });
 
     // Use webPath to display the new image instead of base64 since it's
     // already loaded into memory
     return {
       filepath: fileName,
-      webviewPath: photo.webPath
+      webviewPath: photo.webPath,
     };
   }
 
@@ -155,17 +155,18 @@ export class PhotoService {
     const response = await fetch(photo.webPath!);
     const blob = await response.blob();
 
-    return await this.convertBlobToBase64(blob) as string;
+    return (await this.convertBlobToBase64(blob)) as string;
   }
 
-  private convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onerror = reject;
-    reader.onload = () => {
+  private convertBlobToBase64 = (blob: Blob) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onerror = reject;
+      reader.onload = () => {
         resolve(reader.result);
-    };
-    reader.readAsDataURL(blob);
-  });
+      };
+      reader.readAsDataURL(blob);
+    });
 }
 
 export interface UserPhoto {
@@ -187,7 +188,6 @@ import { PhotoService } from '../services/photo.service';
   standalone: false,
 })
 export class Tab2Page {
-
   constructor(public photoService: PhotoService) {}
 
   // add call to loadSaved on navigation to Photos tab
@@ -200,6 +200,7 @@ export class Tab2Page {
   }
 }
 ```
+
 :::note
 If you're seeing broken image links or missing photos after following these steps, you may need to open your browser's
 dev tools and clear both [localStorage](https://developer.chrome.com/docs/devtools/storage/localstorage) and [IndexedDB](https://developer.chrome.com/docs/devtools/storage/indexeddb).

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

@@ -70,7 +70,9 @@ top of `photo.service.ts`.
 ```tsx
 import { Capacitor } from '@capacitor/core';
 ```
+
 Then update `savePicture()` to look like the following:
+
 ```tsx
 // Save picture to file on device
 private async savePicture(photo: Photo) {