How can i control call popup options in IONIC

Question

Here is my situation, i have a contact list in my Ionic 5 App which can include one or more phone numbers per contact. Some of them might be mobile nd support SMS as well. so for now when I create the phone array in my list I use the below code to allow the user to initiate a call

  <p *ngIf="phone.type === 'Mobile'">
    <ion-icon class="big center green" ios="car"></ion-icon> 
    <a (click)="dialNumber(phone.number)">({{phone.number | slice:0:3 }})
            {{phone.number | slice:3:6 }}-{{phone.number | slice:6:10 }}
    </a>
  </p>

dialNumber(nbr: string) {
    this.callNumber.callNumber(nbr, true)
  .then(res => console.log('Launched dialer!', res))
  .catch(err => console.log('Error launching dialer', err));
  }

The Above Code creates a popup at the lower part of screen with the option of Call that number and Cancel. What i would like to actually do is show all the Numbers of the contact so user can click on the desired nbr. also i would like to be able to have items in popup that will trigger an SMS vs a call. So my question is how would i go to control the popup and add additional nbrs and possibly allow for SMS.

This is a screenshot what it looks like currently

Answer 1

Seems like you're using this Cordova plugin so you can't change the options shown in that popup.

What you can do is to show your own custom action sheet when the user clicks on the contact, and then set the available options based on the contact that has been selected.

https://ionicframework.com/docs/api/action-sheet

import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'action-sheet-example',
  templateUrl: 'action-sheet-example.html',
  styleUrls: ['./action-sheet-example.css'],
})
export class ActionSheetExample {

  constructor(public actionSheetController: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      cssClass: 'my-custom-class',
      buttons: [
        {
          text: 'Delete',
          role: 'destructive',
          icon: 'trash',
          handler: () => {
            console.log('Delete clicked');
          }
        }, 
        {
          text: 'Share',
          icon: 'share',
          handler: () => {
            console.log('Share clicked');
          }
        }, 
        {
          text: 'Play (open modal)',
          icon: 'caret-forward-circle',
          handler: () => {
            console.log('Play clicked');
          }
        }, 
        {
          text: 'Favorite',
          icon: 'heart',
          handler: () => {
            console.log('Favorite clicked');
          }
        }, 
        {
          text: 'Cancel',
          icon: 'close',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    
    await actionSheet.present();
  }

}

So in that case, when the user clicks on a contact that user would see your action sheet with options to send an SMS and to make a call, and if the user selects to make a call you'd hide the action sheet and then you'd call the Cordova plugin.