shopping-list.ts

import { Component } from '@angular/core';
import { NgForm } from "@angular/forms";
import { PopoverController } from "ionic-angular";
import { ShoppingListService } from "../../services/shopping-list";
import { Ingredient } from "../../models/ingredient";
import { SLOptionsPage } from "./sl-options/sl-options";
@Component({
  selector: 'page-shopping-list',
  templateUrl: 'shopping-list.html'
})
export class ShoppingListPage {
  listItems: Ingredient[];

  constructor(private slService: ShoppingListService,
              private popoverCtrl: PopoverController) {}

  ionViewWillEnter() {
    this.loadItems();
  }

  onAddItem(form: NgForm) {
    this.slService.addItem(form.value.ingredientName, form.value.amount);
    form.reset();
    this.loadItems();
  }

  onCheckItem(index: number) {
    this.slService.removeItem(index);
    this.loadItems();
  }

  private loadItems() {
    this.listItems = this.slService.getItems();
  }
  // load sl options
  onShowOptions(){
    const popover = this.popoverCtrl.create(SLOptionsPage);
    popover.present();
  }
}