finalized v4 code

config.xml

@@ -83,11 +83,8 @@
     <plugin name="cordova-plugin-ionic-webview" spec="^2.0.0" />
     <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
     <plugin name="cordova-plugin-camera" spec="4.0.3" />
-
-    <!-- Required for iOS 10 Camera access 
-         More info: https://github.com/apache/cordova-plugin-camera#ios-quirks -->
     <edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
         <string>Used to take pictures</string>
     </edit-config>
-
+    <plugin name="cordova-sqlite-storage" spec="^2.5.1" />
 </widget>

package.json

@@ -26,7 +26,9 @@
         "@ionic-native/status-bar": "5.0.0-beta.21",
         "@ionic/angular": "4.0.0-beta.16",
         "@ionic/pro": "2.0.3",
+        "@ionic/storage": "^2.2.0",
         "cordova-plugin-camera": "4.0.3",
+        "cordova-sqlite-storage": "^2.5.1",
         "core-js": "^2.5.4",
         "rxjs": "~6.3.3",
         "zone.js": "~0.8.26"
@@ -60,7 +62,8 @@
     "description": "An Ionic project",
     "cordova": {
         "plugins": {
-      "cordova-plugin-camera": {}
+            "cordova-plugin-camera": {},
+            "cordova-sqlite-storage": {}
         }
     }
 }

src/app/about/about.page.html

@@ -5,10 +5,16 @@
 </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-fab-button (click)="photoService.takePicture()">
       <ion-icon name="camera"></ion-icon>
     </ion-fab-button>
   </ion-fab>

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() {
+  ngOnInit() {
-    const options: CameraOptions = {
+    this.photoService.loadSaved();
-      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);
-    });
   }
 
 }

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;
+}
+

typings/cordova-typings.d.ts

@@ -1,3 +1,5 @@
 
 /// <reference path="../.vscode/typings/cordova-ionic/plugins/keyboard.d.ts"/>
 /// <reference path="../.vscode/typings/jquery/jquery.d.ts"/>
+/// <reference path="..\.vscode\typings\cordova-ionic\plugins\keyboard.d.ts"/>
+/// <reference path="..\.vscode\typings\jquery\jquery.d.ts"/>