Ionic 3: ion- auto-complete - How to pass different data other than autocomplete generated data - ionic-framework

Question

I have created an auto complete functionality in ionic 3 framework.
app.component.html
<form [formGroup]="myForm" (ngSubmit)="openModal()">
<div class="ion-form-group">
<ion-auto-complete [dataProvider]="ionAutoCompleteService"
[options]="{ placeholder : 'Search an Institution' }" formControlName="institution"
required>
</ion-auto-complete>
</div>
<button [disabled]="!myForm.valid" icon-left ion-button type="submit" block>
<ion-icon name="link"></ion-icon>
Link Institution
</button>
</form>
for this I also create the service provider as follow
import {AutoCompleteService} from 'ionic2-auto-complete';
import { Http } from '#angular/http';
import {Injectable} from "#angular/core";
import 'rxjs/add/operator/map'
#Injectable()
export class IonicAutoCompleteService implements AutoCompleteService {
labelAttribute = "name";
constructor(private http:Http) {
}
getResults(keyword:string) {
return this.http.get("https://aqueous-oasis-93790.herokuapp.com/institutions/search?name="+keyword)
.map(
result =>
{
console.log(result)
return result.json().institutions
.filter(item => item.name.toLowerCase().startsWith(keyword.toLowerCase()) )
});
}
}
this service provides me the name of institutions which are retrieve from the json file.
To access this service I just need to import the service in app.component.ts file
app.component.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { FormGroup, FormControl, Validators } from '#angular/forms';
import { IonicAutoCompleteService } from '../../../services/ionic-autocomplete.service';
import { AddAccountModalPage } from './add-account-modal/add-account-modal';
#IonicPage()
#Component({
selector: 'page-add-account',
templateUrl: 'add-account.html',
})
export class AddAccountPage {
constructor(public navCtrl: NavController, public navParams: NavParams,
public ionAutoCompleteService:IonicAutoCompleteService,
public modalCtrl:ModalController) {
}
ngOnInit(): void { }
myForm = new FormGroup({
institution: new FormControl('', [Validators.required])
})
submit(): void {
console.log(this.myForm.value.institution)
}
onClick() {
console.log("img clicked")
}
openModal() {
let modal = this.modalCtrl.create(AddAccountModalPage);
modal.present();
}
}
My question is that, When I am submit the form, the value in search box will be submitted which is name of institution.
I want to send the institution name to following ionic modal
I also want to send institution id as a modal parameter like (ngSubmit)="openmodal(institution_id)" in app.component.html file
modal.html
<ion-header>
<ion-toolbar>
<ion-title>
Add Account Modal
</ion-title>
<ion-buttons start>
<button ion-button (click)="dismiss()">
<span ion-text color="primary" showWhen="ios">Cancel</span>
<ion-icon name="md-close" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
modal.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
#IonicPage()
#Component({
selector: 'page-add-account-modal',
templateUrl: 'add-account-modal.html',
})
export class AddAccountModalPage {
institution = "india"
constructor(public navCtrl: NavController, public navParams: NavParams,
public viewCtrl: ViewController) {
}
ionViewDidLoad() {
}
dismiss() {
this.viewCtrl.dismiss();
}
}

Answer 1

You can send parameters like this:
openModal() {
let Modal = this.modalCtrl.create(AddAccountModalPage,
{ institution: this.formGroup.get('institution').value
});
Modal.present();
}
and after get this parameter in modal.ts:
institution: any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public viewCtrl: ViewController) {
}
ngOnInit() {
this.institution= this.navParams.get('institution');
}