Salesforce Mobile SDK and Ionic – Edit Contact Part III

Update ContactDetailsPage Component

In the ContactDetailsPage component we are going to want a button to select to open a modal to edit the contact. This means we will need a button on the html template. And logic in the component class to handle the click event.

The button will be pretty straight forward. We will add an html button with a ion-button component on it that uses the Angular event binding for the click event, (click), to call the updateContact method on the controller passing in the contact.

Edit Contact Button

<button ion-button (click)="updateContact(contact)">Edit</button>

Now for the fun part. We will need to import a couple more things. From ionic-angular we will need to add the ModalController. This can be done as part of the other imports from ionic-angular on line 2. We will also need to import the ContactEditPage controller.

Updated constructor

Now we will need to add a method called updateContact to create a modal with the modalCtrl that we have access to and the reference to the ContactEditPage component. This method will accept a contact of type any and use that as the value of the property named contact in the object passed in the to modalCtrl.create method. Then we present the modal.