HOME.HTML

    <ion-header>
    <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item *ngFor="let grocery of itemsArray">{{grocery}}</ion-item>
  </ion-list>
  <button ion-button round (click)="addItem()">Add Item</button>
</ion-content>

HOME.TS

    export class HomePage {

  public itemsArray = [];
  newItem: String;
  constructor(public navCtrl: NavController, public modalCtrl: ModalController, public navParams: NavParams) {
  }
  ionViewDidLoad() {
    this.newItem = this.navParams.get('data');
    this.itemsArray = [
      'Bread',
      'Milk',
      'Cheese',
      'Snacks',
      'Apples',
      'Bananas',
      'Peanut Butter',
      'Chocolate',
      'Avocada',
      'Vegemite',
      'Muffins',
      'Paper towels'
    ];
    this.itemsArray.push(this.newItem)

  }
  public addItem() {
    let modalPage = this.modalCtrl.create(ModalPage);
    modalPage.onDidDismiss(data => {
      this.newItem = data;
    });
    modalPage.present();
  }
}

MODAL.HTML

    <ion-header>
  <ion-navbar>
    <ion-title>Add Item</ion-title>
    <ion-buttons end>
      <button ion-button (click)="closeModal()">Close</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label>Item</ion-label>
      <ion-input type="text" [(ngModel)]="newItem"></ion-input>
    </ion-item>
    <button ion-button color="secondary" (click)="add()">Add Item</button>
  </ion-list>
</ion-content>

MODAL.TS

    export class ModalPage {
  name:any;

  constructor(public navCtrl: NavController, public viewCtrl: ViewController, public navParams: NavParams) {

  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalPage');
  }
  public closeModal() {
    this.viewCtrl.dismiss();

  }
  add() {
    let data = {"name": this.name};
    this.viewCtrl.dismiss(data)
  }

}