Display image taken with camera on multiple pages

Ionic Framework ionic-v3
1

I have the camera taking a photo and displaying it on this page:

add-item.ts

import { Component } from '@angular/core';
import { NavController, ViewController } from 'ionic-angular';
//new imports below
import {LocalNotifications} from '@ionic-native/local-notifications';
import * as moment from 'moment';
import {AlertController} from 'ionic-angular';
import { Platform } from 'ionic-angular';
import {Camera} from 'ionic-native';

@Component({
  selector: 'page-add-item',
  templateUrl: 'add-item.html'
})
export class AddItemPage {
//camera properties
  public base64Image: string;

 //new properties belowww
  notifyTime: any;
    notifications: any[] = [];
    days: any[];
    chosenHours: number;
    chosenMinutes: number;
//end new properties
  title;
  description;
  moreDescription;

  //camera function
  takePicture(){
    Camera.getPicture({
        destinationType: Camera.DestinationType.DATA_URL,
        targetWidth: 1000,
        targetHeight: 1000
    }).then((imageData) => {
      // imageData is a base64 encoded string
        this.base64Image = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });
  }
 //end camera function
  constructor(public nav: NavController, public view: ViewController,/* NEW CONSTRUCTORSS*/ public plt: Platform, public alertCtrl: AlertController, private LocalNotifications: LocalNotifications, public Camera: Camera) {
 //new
        this.notifyTime = moment(new Date()).format();
 
        this.chosenHours = new Date().getHours();
        this.chosenMinutes = new Date().getMinutes();
 
        this.days = [
            {title: 'Monday', dayCode: 1, checked: false},
            {title: 'Tuesday', dayCode: 2, checked: false},
            {title: 'Wednesday', dayCode: 3, checked: false},
            {title: 'Thursday', dayCode: 4, checked: false},
            {title: 'Friday', dayCode: 5, checked: false},
            {title: 'Saturday', dayCode: 6, checked: false},
            {title: 'Sunday', dayCode: 0, checked: false}
        ];
//END NEW
  }

  //NEW FUNCTIONS
  ionViewDidLoad(){
    this.plt.ready().then(() => {
console.log("-----------------in view did load-------------------");
this.LocalNotifications.hasPermission().then(function(granted) {
if (!granted) {
this.localNotifications.registerPermission();
}
});
});
    }
 
    timeChange(time){
      this.chosenHours = time.hour.value;
      this.chosenMinutes = time.minute.value;
    }
 
    addNotifications(){
      let currentDate = new Date();
    let currentDay = currentDate.getDay(); // Sunday = 0, Monday = 1, etc.
 
    for(let day of this.days){
 
        if(day.checked){
 
            let firstNotificationTime = new Date();
            let dayDifference = day.dayCode - currentDay;
 
            if(dayDifference < 0){
                dayDifference = dayDifference + 7; // for cases where the day is in the following week
            }
 
            firstNotificationTime.setHours(firstNotificationTime.getHours() + (24 * (dayDifference)));
            firstNotificationTime.setHours(this.chosenHours);
            firstNotificationTime.setMinutes(this.chosenMinutes);
 
            let notification = {
                id: day.dayCode,
                title: 'Hey!',
                text: 'You just got notified :)',
                at: firstNotificationTime,
                every: 'week'
            };
 
            this.notifications.push(notification);
 
        }
 
    }
 
    console.log("Notifications to be scheduled: ", this.notifications);
 
    if(this.plt.is('cordova')){
 
        // Cancel any existing notifications
        this.LocalNotifications.cancelAll().then(() => {
 
            // Schedule the new notifications
            this.LocalNotifications.schedule(this.notifications);
 
            this.notifications = [];
 
            let alert = this.alertCtrl.create({
                title: 'Notifications set',
                buttons: ['Ok']
            });
 
            alert.present();
 
        });
 
    }
    }
 
    cancelAll(){
      this.LocalNotifications.cancelAll();
 
    let alert = this.alertCtrl.create({
        title: 'Notifications cancelled',
        buttons: ['Ok']
    });
 
    alert.present();
    }
 //END NEW FUNCTIONSss
  saveItem(){
 
    let newItem = {
      title: this.title,
      description: this.description,
      moreDescription: this.moreDescription,
      notifyTime: this.notifyTime,
      chosenPicture: this.base64Image
      //day: this.days
    };
 
    this.view.dismiss(newItem);
 
  }
 
  close(){
    this.view.dismiss();
  }
 
}

add-item.html

        </ion-item>
 
        <ion-item *ngFor="let day of days">
            <ion-label>{{day.title}}</ion-label>
            <ion-checkbox [(ngModel)]="day.checked" color="primary"></ion-checkbox>
        </ion-item>
    <!--end moment html-->
    <ion-item>
      <ion-label>Heat sensitive?</ion-label>
      <ion-toggle [(ngModel)]="moreDescription"></ion-toggle>
    </ion-item>
<ion-card>
    <ion-card-content>

      <button ion-button (click)="takePicture()"><ion-icon name="camera"></ion-icon>Camera</button>

      Latest Picture:
      <img [src]="base64Image" *ngIf="base64Image">
    </ion-card-content>
  </ion-card>
 
  </ion-list>
 

 <!--below may need addNotifications() also onclick-->
  <button full ion-button color="secondary" (click)="saveItem(); addNotifications();">Save & Schedule</button> 
 
</ion-content>
<!--<button (click)="cancelAll()" ion-button color="danger" full>Leave me alone!</button>-->

It works. It displays it.

I want it to ALSO display it on this page:

home.html

<ion-header>
  <ion-navbar color="secondary">
    <ion-title>
      My Plants
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="addItem()"><ion-icon name="add-circle"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list>
  <ion-card>
     <ion-item-sliding *ngFor="let item of items">
     
      <ion-item *ngFor="let item of items" (click)="viewItem(item)"><img [src]="base64Image" *ngIf="base64Image"><h1>{{item.title}}</h1></ion-item>
      
     <ion-item-options>
      <button ion-button color="primary"><ion-icon name="clipboard"></ion-icon>Edit</button>
      <button ion-button color="danger"(click)="removeItem(item)"><ion-icon name="trash"></ion-icon>Delete</button>
    </ion-item-options>
  </ion-item-sliding>
  </ion-card>
  </ion-list>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { ModalController, NavController } from 'ionic-angular';
import { AddItemPage } from '../add-item/add-item';
import { ItemDetailPage } from '../item-detail/item-detail';
import {LocalNotifications} from "@ionic-native/local-notifications";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {


  public items = [];
 
  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
  }
 
  ionViewDidLoad(){
  }

  addItem(){
    let addModal = this.modalCtrl.create(AddItemPage);
    addModal.onDidDismiss((item) => {
          if(item){
            this.saveItem(item);
          }
    });
 
    addModal.present();
  }
 
  saveItem(item){
    this.items.push(item);
  }
 
  viewItem(item){
 this.navCtrl.push(ItemDetailPage, {
    item: item
  });
  }
}

But it doesn’t. I have no idea what I’m doing wrong. No errors are thrown. It just does not display

2

I’m not seeing a base64Image property in HomePage, so I expect its template isn’t either.

3

Like setting:

public base64Image: string;

under export on home.ts?

I’m afraid I don’t know what a template is, either.

4

Presumably you have a separate image for each element of the loop, so you would need to have it as a property of those items. I think the Tour of Heroes might help you get more comfortable with Angular.