Screens

Let's create different pages that allows us to list and do actions on the employees database. We already have a home page generated for us which lives in src/app/pages/home. Open home.html then update the code to show the list of employees using <ion-list> 

 <ion-header>
   <ion-navbar>
     <ion-title>
       Ionic Employee Database
     </ion-title>
     <ion-buttons end>
       <button ion-button (click)="addEmployee()">
         <ion-icon name="add"></ion-icon>
       </button>
     </ion-buttons>
   </ion-navbar>
 </ion-header>

 <ion-content padding>
   <ion-list>
     <ion-item *ngFor="let emp of employees" (click)="showDetails(emp)">
       <div>
         <h3>{{emp.doc.firstName}} {{emp.doc.lastName}}</h3>
       </div>
     </ion-item>
   </ion-list>
 </ion-content>

Next we need to add the code to get employees in src/pages/home/home.ts so open the file then update it to match with the following code: 

 import { Component } from '@angular/core';
 import { IonicPage, NavController, ModalController } from 'ionic-angular';
 import { EmployeeProvider } from './../../providers/employee/employee';

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

   public employees;

   constructor(
     public navCtrl: NavController,
     public modalCtrl: ModalController,
     public empProv: EmployeeProvider
   ) {}

   ionViewDidEnter() {
     this.empProv.createPouchDB();

     this.empProv.read()
       .then(employees => {
         this.employees = employees;
       }).catch((err) => { console.log(err)} );
   }

   showDetails(employee) {
     let modal = this.modalCtrl.create('EmployeePage', { employee: employee });
     modal.onDidDismiss(data => {
       this.reReadEmployees();
     });
     modal.present();
   }

   addEmployee() {
     let modal = this.modalCtrl.create('EmployeePage', { employee: null });
     modal.onDidDismiss(data => {
       this.reReadEmployees()
     });
     modal.present();
   }

   reReadEmployees() {
     this.empProv.read()
       .then(employees => {
         this.employees = employees;
       }).catch((err) => { console.log(err)} );
   }
 }

Next we need to generate a new page for employee details so run the following command in your terminal:

ionic g page employee

This will generate an employee folder inside app/pages/employee with three files. Open employee.html then update it to match the following code: 

 <ion-header>
   <ion-navbar>
     <ion-title>Employee Details</ion-title>
     <ion-buttons end *ngIf="canDelete">
       <button ion-button (click)="delete()">
         <ion-icon name="trash"></ion-icon>
       </button>
     </ion-buttons>
   </ion-navbar>
 </ion-header>

 <ion-content>
   <ion-list>
     <ion-item>
       <ion-label>First Name</ion-label>
       <ion-input text-right type="text" [(ngModel)]="employee.firstName"></ion-input>
     </ion-item>
     <ion-item>
       <ion-label>Last Name</ion-label>
       <ion-input text-right type="text" [(ngModel)]="employee.lastName"></ion-input>
     </ion-item>
   </ion-list>
   <button ion-button block (click)="addOrUpdate()">Add/Update Employee</button>
 </ion-content>

Next update src/pages/employee/employee.ts to add the required logic code 

 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
 import { EmployeeProvider } from './../../providers/employee/employee';

 @IonicPage()
 @Component({
   selector: 'page-employee',
   templateUrl: 'employee.html',
 })
 export class EmployeePage {
   employee: any = {};
   canDelete = false;
   canUpdate = false;

   constructor(
     public navCtrl: NavController,
     public navParams: NavParams,
     private employeeProvider: EmployeeProvider,
     public viewCtrl: ViewController
   ) {}

   ionViewDidEnter() {
     var employee = this.navParams.get('employee');
     if (employee) {
       this.employee = employee.doc;
       this.canDelete = true;
       this.canUpdate = true;
     }
   }

   addOrUpdate() {
     if (this.canUpdate) {
       this.employeeProvider.update(this.employee).catch(() => {});
     }
     else {
       this.employeeProvider.create(this.employee).catch(() => {});
     }
     this.viewCtrl.dismiss(this.employee);
   }

   delete() {
     this.employeeProvider.delete(this.employee).catch(() => {});
     this.viewCtrl.dismiss(this.employee);
   }
 }