docs(angular): remove periods and add ()

Author: thetaPC

docs/angular/your-first-app.md

@@ -111,10 +111,10 @@ Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
 ```ts
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
-// CHANGE: Add the following import.
+// CHANGE: Add the following import
 import { defineCustomElements } from '@ionic/pwa-elements/loader';
 
-// CHANGE: Call the element loader before the `bootstrapModule` call.
+// CHANGE: Call the element loader before the `bootstrapModule` call
 defineCustomElements(window);
 
 platformBrowserDynamic()

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

@@ -25,7 +25,7 @@ Open the new `services/photo.service.ts` file, and let’s add the logic that wi
 
 ```ts
 import { Injectable } from '@angular/core';
-// CHANGE: Add the following imports.
+// CHANGE: Add the following imports
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Preferences } from '@capacitor/preferences';
@@ -45,7 +45,7 @@ import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Preferences } from '@capacitor/preferences';
 
 export class PhotoService {
-  // CHANGE: Add the gallery function.
+  // CHANGE: Add the gallery method
   public async addNewToGallery() {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({
@@ -63,7 +63,7 @@ Next, in `tab2.page.ts`, import the `PhotoService` class and add a method to cal
 
 ```ts
 import { Component } from '@angular/core';
-// CHANGE: Import the PhotoService.
+// CHANGE: Import the PhotoService
 import { PhotoService } from '../services/photo.service';
 
 @Component({
@@ -73,10 +73,10 @@ import { PhotoService } from '../services/photo.service';
   standalone: false,
 })
 export class Tab2Page {
-  // CHANGE: Update constructor to include `photoService`.
+  // CHANGE: Update constructor to include `photoService`
   constructor(public photoService: PhotoService) {}
 
-  // CHANGE: Add `addNewToGallery` method.
+  // CHANGE: Add `addNewToGallery()` method
   addPhotoToGallery() {
     this.photoService.addNewToGallery();
   }
@@ -125,7 +125,7 @@ export class PhotoService {
   // ...existing code...
 }
 
-// CHANGE: Add the `UserPhoto` interface.
+// CHANGE: Add the `UserPhoto` interface
 export interface UserPhoto {
   filepath: string;
   webviewPath?: string;
@@ -136,7 +136,7 @@ Above the `addNewToGallery()` method, define an array of `UserPhoto`, which will
 
 ```ts
 export class PhotoService {
-  // CHANGE: Add the `photos` array.
+  // CHANGE: Add the `photos` array
   public photos: UserPhoto[] = [];
 
   public async addNewToGallery() {
@@ -148,7 +148,7 @@ export class PhotoService {
 Over in the `addNewToGallery` method, add the newly captured photo to the beginning of the `photos` array.
 
 ```ts
-// CHANGE: Update `addNewToGallery()` method.
+// CHANGE: Update `addNewToGallery()` method
 public async addNewToGallery() {
   // Take a photo
   const capturedPhoto = await Camera.getPhoto({
@@ -157,7 +157,7 @@ public async addNewToGallery() {
     quality: 100
   });
 
-  // CHANGE: Add the new photo to the photos array.
+  // CHANGE: Add the new photo to the photos array
   this.photos.unshift({
     filepath: "soon...",
     webviewPath: capturedPhoto.webPath!

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

@@ -29,7 +29,7 @@ import { Preferences } from '@capacitor/preferences';
 export class PhotoService {
   // ...existing code...
 
-  // CHANGE: Add the `savePicture()` method.
+  // CHANGE: Add the `savePicture()` method
   private async savePicture(photo: Photo) {
     return {
       filepath: 'soon...',
@@ -58,7 +58,7 @@ import { Preferences } from '@capacitor/preferences';
 export class PhotoService {
   public photos: UserPhoto[] = [];
 
-  // CHANGE: Update the `addNewToGallery()` method.
+  // CHANGE: Update the `addNewToGallery()` method
   public async addNewToGallery() {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({
@@ -67,7 +67,7 @@ export class PhotoService {
       quality: 100,
     });
 
-    // CHANGE: Add `savedImageFile`.
+    // CHANGE: Add `savedImageFile`
     // Save the picture and add it to photo collection
     const savedImageFile = await this.savePicture(capturedPhoto);
 
@@ -107,7 +107,7 @@ import { Preferences } from '@capacitor/preferences';
 export class PhotoService {
   // ...existing code...
 
-  // CHANGE: Update the `savePicture()` method.
+  // CHANGE: Update the `savePicture()` method
   private async savePicture(photo: Photo) {
     // Fetch the photo, read as a blob, then convert to base64 format
     const response = await fetch(photo.webPath!);
@@ -130,7 +130,7 @@ export class PhotoService {
     };
   }
 
-  // CHANGE: Add the `convertBlobToBase64` method.
+  // CHANGE: Add the `convertBlobToBase64` method
   private convertBlobToBase64(blob: Blob) {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();

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

@@ -23,7 +23,7 @@ Open `photo.service.ts` and begin by defining a new property in the `PhotoServic
 export class PhotoService {
   public photos: UserPhoto[] = [];
 
-  // CHANGE: Add a key for photo storage.
+  // CHANGE: Add a key for photo storage
   private PHOTO_STORAGE: string = 'photos';
 
   // ...existing code...
@@ -45,7 +45,7 @@ public async addNewToGallery() {
 
   this.photos.unshift(savedImageFile);
 
-  // CHANGE: Add method to cache all photo data for future retrieval.
+  // CHANGE: Add method to cache all photo data for future retrieval
   Preferences.set({
     key: this.PHOTO_STORAGE,
     value: JSON.stringify(this.photos),
@@ -59,7 +59,7 @@ With the photo array data saved, create a new public method in the `PhotoService
 export class PhotoService {
   // ...existing code...
 
-  // CHANGE: Add the method to load the photo data.
+  // CHANGE: Add the method to load the photo data
   public async loadSaved() {
     // Retrieve cached photo array data
     const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE });
@@ -74,13 +74,13 @@ On mobile (coming up next!), we can directly set the source of an image tag - `<
 export class PhotoService {
   // ...existing code...
 
-  // CHANGE: Update the `loadSaved` method.
+  // CHANGE: Update the `loadSaved()` method
   public async loadSaved() {
     // Retrieve cached photo array data
     const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE });
     this.photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[];
 
-    // CHANGE: Display the photo by reading into base64 format.
+    // 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({
@@ -175,7 +175,7 @@ export interface UserPhoto {
 }
 ```
 
-Our `PhotoService` can now load the saved images, but we'll need to update `tab2.page.ts` to put that new code to work. We'll call `loadSaved` within the [ngOnInit](https://angular.dev/guide/components/lifecycle#ngoninit) lifecycle method so that when the user first navigates to the Photo Gallery, all photos are loaded and displayed on the screen.
+Our `PhotoService` can now load the saved images, but we'll need to update `tab2.page.ts` to put that new code to work. We'll call `loadSaved()` within the [ngOnInit](https://angular.dev/guide/components/lifecycle#ngoninit) lifecycle method so that when the user first navigates to the Photo Gallery, all photos are loaded and displayed on the screen.
 
 Update `tab2.page.ts` to look like the following:
 
@@ -192,7 +192,7 @@ import { PhotoService } from '../services/photo.service';
 export class Tab2Page {
   constructor(public photoService: PhotoService) {}
 
-  // CHANGE: Add call to `loadSaved` when navigating to the Photos tab.
+  // CHANGE: Add call to `loadSaved()` when navigating to the Photos tab
   async ngOnInit() {
     await this.photoService.loadSaved();
   }

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

@@ -26,18 +26,18 @@ import { Injectable } from '@angular/core';
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Preferences } from '@capacitor/preferences';
-// CHANGE: Add import.
+// CHANGE: Add import
 import { Platform } from '@ionic/angular';
 
 export class PhotoService {
   public photos: UserPhoto[] = [];
 
   private PHOTO_STORAGE: string = 'photos';
 
-  // CHANGE: Add a property to track the app's running platform.
+  // CHANGE: Add a property to track the app's running platform
   private platform: Platform;
 
-  // CHANGE: Update constructor to set `platform`.
+  // CHANGE: Update constructor to set `platform`
   constructor(platform: Platform) {
     this.platform = platform;
   }
@@ -53,11 +53,11 @@ First, we’ll update the photo saving functionality to support mobile. In the `
 Update `savePicture()` to look like the following:
 
 ```ts
-// CHANGE: Update the `savePicture()` method.
+// CHANGE: Update the `savePicture()` method
 private async savePicture(photo: Photo) {
   let base64Data: string | Blob;
 
-  // CHANGE: Add platform check.
+  // CHANGE: Add platform check
   // "hybrid" will detect Cordova or Capacitor
   if (this.platform.is('hybrid')) {
     // Read the file into base64 format
@@ -98,7 +98,7 @@ import { Capacitor } from '@capacitor/core';
 Then update `savePicture()` to look like the following:
 
 ```ts
-// CHANGE: Update `savePicture()` method.
+// CHANGE: Update `savePicture()` method
 private async savePicture(photo: Photo) {
   let base64Data: string | Blob;
   // "hybrid" will detect mobile - iOS or Android
@@ -122,7 +122,7 @@ private async savePicture(photo: Photo) {
     directory: Directory.Data,
   });
 
-  // CHANGE: Add platform check.
+  // CHANGE: Add platform check
   if (this.platform.is('hybrid')) {
     // Display the new image by rewriting the 'file://' path to HTTP
     return {
@@ -143,12 +143,12 @@ private async savePicture(photo: Photo) {
 Next, add a new bit of logic in the `loadSaved()` method. On mobile, we can directly point to each photo file on the Filesystem and display them automatically. On the web, however, we must read each image from the Filesystem into base64 format. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Update the `loadSaved()` method:
 
 ```ts
-// CHANGE: Update `loadSaved` method.
+// CHANGE: Update `loadSaved()` method
 public async loadSaved() {
   const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE });
   this.photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[];
 
-  // CHANGE: Add platform check.
+  // CHANGE: Add platform check
   // If running on the web...
   if (!this.platform.is('hybrid')) {
     for (let photo of this.photos) {

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

@@ -51,7 +51,7 @@ import { Capacitor } from '@capacitor/core';
 export class PhotoService {
   // ...existing code...
 
-  // CHANGE: Add `deletePhoto()` method.
+  // CHANGE: Add `deletePhoto()` method
   public async deletePhoto(photo: UserPhoto, position: number) {
     // Remove this photo from the Photos reference data array
     this.photos.splice(position, 1);
@@ -82,10 +82,10 @@ Next, in `tab2.page.ts`, implement the `showActionSheet()` method. We're adding
 
 ```ts
 import { Component } from '@angular/core';
-// Change: Add import.
+// Change: Add import
 import type { UserPhoto } from '../services/photo.service';
 import { PhotoService } from '../services/photo.service';
-// CHANGE: Add import.
+// CHANGE: Add import
 import { ActionSheetController } from '@ionic/angular';
 
 @Component({
@@ -95,12 +95,12 @@ import { ActionSheetController } from '@ionic/angular';
   standalone: false,
 })
 export class Tab2Page {
-  // CHANGE: Update constructor.
+  // CHANGE: Update constructor
   constructor(public photoService: PhotoService, public actionSheetController: ActionSheetController) {}
 
   // ...existing code...
 
-  // CHANGE: Add `showActionSheet` method.
+  // CHANGE: Add `showActionSheet()` method
   public async showActionSheet(photo: UserPhoto, position: number) {
     const actionSheet = await this.actionSheetController.create({
       header: 'Photos',

versioned_docs/version-v7/angular/your-first-app.md

@@ -111,10 +111,10 @@ Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
 ```ts
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
-// CHANGE: Add the following import.
+// CHANGE: Add the following import
 import { defineCustomElements } from '@ionic/pwa-elements/loader';
 
-// CHANGE: Call the element loader before the `bootstrapModule` call.
+// CHANGE: Call the element loader before the `bootstrapModule` call
 defineCustomElements(window);
 
 platformBrowserDynamic()

versioned_docs/version-v7/angular/your-first-app/2-taking-photos.md

@@ -25,7 +25,7 @@ Open the new `services/photo.service.ts` file, and let’s add the logic that wi
 
 ```ts
 import { Injectable } from '@angular/core';
-// CHANGE: Add the following imports.
+// CHANGE: Add the following imports
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Preferences } from '@capacitor/preferences';
@@ -45,7 +45,7 @@ import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Preferences } from '@capacitor/preferences';
 
 export class PhotoService {
-  // CHANGE: Add the gallery function.
+  // CHANGE: Add the gallery method
   public async addNewToGallery() {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({
@@ -63,7 +63,7 @@ Next, in `tab2.page.ts`, import the `PhotoService` class and add a method to cal
 
 ```ts
 import { Component } from '@angular/core';
-// CHANGE: Import the PhotoService.
+// CHANGE: Import the PhotoService
 import { PhotoService } from '../services/photo.service';
 
 @Component({
@@ -73,10 +73,10 @@ import { PhotoService } from '../services/photo.service';
   standalone: false,
 })
 export class Tab2Page {
-  // CHANGE: Update constructor to include `photoService`.
+  // CHANGE: Update constructor to include `photoService`
   constructor(public photoService: PhotoService) {}
 
-  // CHANGE: Add `addNewToGallery` method.
+  // CHANGE: Add `addNewToGallery()` method
   addPhotoToGallery() {
     this.photoService.addNewToGallery();
   }
@@ -125,7 +125,7 @@ export class PhotoService {
   // ...existing code...
 }
 
-// CHANGE: Add the `UserPhoto` interface.
+// CHANGE: Add the `UserPhoto` interface
 export interface UserPhoto {
   filepath: string;
   webviewPath?: string;
@@ -136,7 +136,7 @@ Above the `addNewToGallery()` method, define an array of `UserPhoto`, which will
 
 ```ts
 export class PhotoService {
-  // CHANGE: Add the `photos` array.
+  // CHANGE: Add the `photos` array
   public photos: UserPhoto[] = [];
 
   public async addNewToGallery() {
@@ -148,7 +148,7 @@ export class PhotoService {
 Over in the `addNewToGallery` method, add the newly captured photo to the beginning of the `photos` array.
 
 ```ts
-// CHANGE: Update `addNewToGallery()` method.
+// CHANGE: Update `addNewToGallery()` method
 public async addNewToGallery() {
   // Take a photo
   const capturedPhoto = await Camera.getPhoto({
@@ -157,7 +157,7 @@ public async addNewToGallery() {
     quality: 100
   });
 
-  // CHANGE: Add the new photo to the photos array.
+  // CHANGE: Add the new photo to the photos array
   this.photos.unshift({
     filepath: "soon...",
     webviewPath: capturedPhoto.webPath!