finalized v4 code

src/app/about/about.page.html

@@ -5,12 +5,18 @@
 </ion-header>
 
 <ion-content>
-  <img [src]="currentImage" *ngIf="currentImage">
+  <ion-grid>
+    <ion-row>
+    <ion-col size="6" *ngFor="let photo of photoService.photos">
+        <img [src]="photo.data" />
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 
   <ion-fab vertical="bottom" horizontal="center" slot="fixed">
-      <ion-fab-button (click)="takePicture()">
-        <ion-icon name="camera"></ion-icon>
-      </ion-fab-button>
+    <ion-fab-button (click)="photoService.takePicture()">
+      <ion-icon name="camera"></ion-icon>
+    </ion-fab-button>
   </ion-fab>
 
 </ion-content>

src/app/about/about.page.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
+import { PhotoService } from '../services/photo.service';
 
 @Component({
   selector: 'app-about',
@@ -9,23 +9,10 @@ import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
 export class AboutPage {
   currentImage: any;
 
-  constructor(private camera: Camera) {  }
+  constructor(public photoService: PhotoService) {  }
 
-  takePicture() {
-    const options: CameraOptions = {
-      quality: 100,
-      destinationType: this.camera.DestinationType.DATA_URL,
-      encodingType: this.camera.EncodingType.JPEG,
-      mediaType: this.camera.MediaType.PICTURE
-    }
-    
-    this.camera.getPicture(options).then((imageData) => {
-     // imageData is either a base64 encoded string or a file URI
-      this.currentImage = 'data:image/jpeg;base64,' + imageData;
-    }, (err) => {
-     // Handle error
-     console.log("Camera issue:" + err);
-    });
+  ngOnInit() {
+    this.photoService.loadSaved();
   }
 
 }

src/app/app.module.ts

@@ -9,11 +9,12 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { Camera } from '@ionic-native/camera/ngx';
+import { IonicStorageModule } from '@ionic/storage';
 
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, IonicStorageModule.forRoot()],
   providers: [
     StatusBar,
     SplashScreen,

src/app/services/photo.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PhotoService } from './photo.service';
+
+describe('PhotoService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PhotoService = TestBed.get(PhotoService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/photo.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
+import { Storage } from '@ionic/storage';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PhotoService {
+
+  public photos: Photo[] = [];
+
+  constructor(private camera: Camera, private storage: Storage) { }
+
+  takePicture() {
+    const options: CameraOptions = {
+      quality: 100,
+      destinationType: this.camera.DestinationType.DATA_URL,
+      encodingType: this.camera.EncodingType.JPEG,
+      mediaType: this.camera.MediaType.PICTURE
+    }
+    
+    this.camera.getPicture(options).then((imageData) => {
+      // Add new photo to gallery
+      this.photos.unshift({
+        data: 'data:image/jpeg;base64,' + imageData
+      });
+
+      // Save all photos for later viewing
+      this.storage.set('photos', this.photos);
+    }, (err) => {
+     // Handle error
+     console.log("Camera issue: " + err);
+    });
+
+  }
+
+  loadSaved() {
+    this.storage.get('photos').then((photos) => {
+      this.photos = photos || [];
+    });
+  }
+
+}
+
+class Photo {
+  data: any;
+}
+