Skip to content

Commit a180cad

Browse files
soundproofbootsoundproofboot
committed
docs(angular): add context to code blocks
1 parent a2d98da commit a180cad

File tree

1 file changed

+172
-41
lines changed

1 file changed

+172
-41
lines changed

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

Lines changed: 172 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -35,49 +35,133 @@ The Live Reload server will start up, and the native IDE of choice will open if
3535
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
3636

3737
```html
38-
<ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
39-
<ion-img [src]="photo.webviewPath" (click)="showActionSheet(photo, position)"></ion-img>
40-
</ion-col>
38+
<ion-header [translucent]="true">
39+
<ion-toolbar>
40+
<ion-title>
41+
Photo Gallery
42+
</ion-title>
43+
</ion-toolbar>
44+
</ion-header>
45+
46+
<ion-content [fullscreen]="true">
47+
<ion-header collapse="condense">
48+
<ion-toolbar>
49+
<ion-title size="large">Photo Gallery</ion-title>
50+
</ion-toolbar>
51+
</ion-header>
52+
53+
<ion-grid>
54+
<ion-row>
55+
<ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
56+
<!-- CHANGE: Add a click event listener to each image -->
57+
<ion-img [src]="photo.webviewPath" (click)="showActionSheet(photo, position)"></ion-img>
58+
</ion-col>
59+
</ion-row>
60+
</ion-grid>
61+
62+
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
63+
<ion-fab-button (click)="addPhotoToGallery()">
64+
<ion-icon name="camera"></ion-icon>
65+
</ion-fab-button>
66+
</ion-fab>
67+
</ion-content>
4168
```
4269

43-
Over in `tab2.page.ts`, import Action Sheet and add it to the constructor:
70+
Over in `tab2.page.ts`, import `ActionSheetController` and add it to the constructor:
4471

4572
```tsx
73+
import { Component } from '@angular/core';
74+
import { PhotoService } from '../services/photo.service';
75+
// CHANGE: Add import
4676
import { ActionSheetController } from '@ionic/angular';
4777

48-
constructor(public photoService: PhotoService,
49-
public actionSheetController: ActionSheetController) {}
78+
@Component({
79+
selector: 'app-tab2',
80+
templateUrl: 'tab2.page.html',
81+
styleUrls: ['tab2.page.scss'],
82+
standalone: false,
83+
})
84+
export class Tab2Page {
85+
86+
// CHANGE: Update constructor to include `actionSheetController`.
87+
constructor(public photoService: PhotoService,
88+
public actionSheetController: ActionSheetController) {}
89+
90+
// other code
91+
}
5092
```
5193

5294
Add `UserPhoto` to the import statement.
5395

5496
```tsx
97+
import { Component } from '@angular/core';
98+
// CHANGE: Update import
5599
import { PhotoService, UserPhoto } from '../services/photo.service';
100+
import { ActionSheetController } from '@ionic/angular';
101+
102+
@Component({
103+
selector: 'app-tab2',
104+
templateUrl: 'tab2.page.html',
105+
styleUrls: ['tab2.page.scss'],
106+
standalone: false,
107+
})
108+
export class Tab2Page {
109+
110+
constructor(public photoService: PhotoService,
111+
public actionSheetController: ActionSheetController) {}
112+
113+
// other code
114+
}
56115
```
57116

58117
Next, implement the `showActionSheet()` function. We add two options: `Delete` that calls PhotoService’s `deletePicture()` function (to be added next) and `Cancel`, which when given the role of “cancel” will automatically close the action sheet:
59118

60119
```tsx
61-
public async showActionSheet(photo: UserPhoto, position: number) {
62-
const actionSheet = await this.actionSheetController.create({
63-
header: 'Photos',
64-
buttons: [{
65-
text: 'Delete',
66-
role: 'destructive',
67-
icon: 'trash',
68-
handler: () => {
69-
this.photoService.deletePicture(photo, position);
70-
}
71-
}, {
72-
text: 'Cancel',
73-
icon: 'close',
74-
role: 'cancel',
75-
handler: () => {
76-
// Nothing to do, action sheet is automatically closed
120+
import { Component } from '@angular/core';
121+
import { PhotoService, UserPhoto } from '../services/photo.service';
122+
import { ActionSheetController } from '@ionic/angular';
123+
124+
@Component({
125+
selector: 'app-tab2',
126+
templateUrl: 'tab2.page.html',
127+
styleUrls: ['tab2.page.scss'],
128+
standalone: false,
129+
})
130+
export class Tab2Page {
131+
132+
constructor(public photoService: PhotoService,
133+
public actionSheetController: ActionSheetController) {}
134+
135+
addPhotoToGallery() {
136+
this.photoService.addNewToGallery();
137+
}
138+
139+
async ngOnInit() {
140+
await this.photoService.loadSaved();
141+
}
142+
143+
// CHANGE: Add `showActionSheet` function.
144+
public async showActionSheet(photo: UserPhoto, position: number) {
145+
const actionSheet = await this.actionSheetController.create({
146+
header: 'Photos',
147+
buttons: [{
148+
text: 'Delete',
149+
role: 'destructive',
150+
icon: 'trash',
151+
handler: () => {
152+
this.photoService.deletePicture(photo, position);
77153
}
78-
}]
79-
});
80-
await actionSheet.present();
154+
}, {
155+
text: 'Cancel',
156+
icon: 'close',
157+
role: 'cancel',
158+
handler: () => {
159+
// Nothing to do, action sheet is automatically closed
160+
}
161+
}]
162+
});
163+
await actionSheet.present();
164+
}
81165
}
82166
```
83167

@@ -86,24 +170,71 @@ Save both of the files we just edited. The Photo Gallery app will reload automat
86170
In `src/app/services/photo.service.ts`, add the `deletePicture()` function:
87171

88172
```tsx
89-
public async deletePicture(photo: UserPhoto, position: number) {
90-
// Remove this photo from the Photos reference data array
91-
this.photos.splice(position, 1);
92-
93-
// Update photos array cache by overwriting the existing photo array
94-
Preferences.set({
95-
key: this.PHOTO_STORAGE,
96-
value: JSON.stringify(this.photos)
173+
import { Injectable } from '@angular/core';
174+
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
175+
import { Filesystem, Directory } from '@capacitor/filesystem';
176+
import { Preferences } from '@capacitor/preferences';
177+
import { Platform } from '@ionic/angular';
178+
import { Capacitor } from '@capacitor/core';
179+
180+
@Injectable({
181+
providedIn: 'root'
182+
})
183+
export class PhotoService {
184+
public photos: UserPhoto[] = [];
185+
private PHOTO_STORAGE: string = 'photos';
186+
private platform: Platform;
187+
188+
constructor(platform: Platform) {
189+
this.platform = platform;
190+
}
191+
192+
public async addNewToGallery() {
193+
// Same old code from before.
194+
}
195+
196+
public async loadSaved() {
197+
// Same old code from before.
198+
}
199+
200+
// Save picture to file on device
201+
private async savePicture(photo: Photo) {
202+
// Same old code from before.
203+
}
204+
205+
// CHANGE: Add the `deletePicture` function.
206+
public async deletePicture(photo: UserPhoto, position: number) {
207+
// Remove this photo from the Photos reference data array
208+
this.photos.splice(position, 1);
209+
210+
// Update photos array cache by overwriting the existing photo array
211+
Preferences.set({
212+
key: this.PHOTO_STORAGE,
213+
value: JSON.stringify(this.photos)
214+
});
215+
216+
// Delete photo file from filesystem
217+
const filename = photo.filepath
218+
.substr(photo.filepath.lastIndexOf('/') + 1);
219+
220+
await Filesystem.deleteFile({
221+
path: filename,
222+
directory: Directory.Data
223+
});
224+
}
225+
226+
private async readAsBase64(photo: Photo) {
227+
// Same old code from before.
228+
}
229+
230+
private convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
231+
// Same old code from before.
97232
});
233+
}
98234

99-
// delete photo file from filesystem
100-
const filename = photo.filepath
101-
.substr(photo.filepath.lastIndexOf('/') + 1);
102-
103-
await Filesystem.deleteFile({
104-
path: filename,
105-
directory: Directory.Data
106-
});
235+
export interface UserPhoto {
236+
filepath: string;
237+
webviewPath?: string;
107238
}
108239
```
109240

0 commit comments

Comments
 (0)