Variable when calling a function in html

Ionic Framework ionic-v3
1

Hello i have this function to make calls using call number Api:

 async callNumber(number):Promise<any>{
    try {
      const res = await this.call.callNumber(String(number), true);
      
    } catch (err) {
      console.log(err);
    }
 }

And im getting user’s data using a GET request when the page loads with :

async fillProfil():Promise<any>{
    var th;
    this.profilId = this.navParams.get('profilId');

     th= await this.authServiceProvider.getData("userbyid/"+this.profilId).subscribe( myData => {
      console.log(myData.username);
      this.myAccountData=myData;
      this.myAccountData.username=this.capitalizeFirstLetter(this.myAccountData.username);
    });
  }

I have a fab button, that calls to callNumber function :

<ion-fab bottom right > 
            <ion-icon (click)="callNumber({{myAccountData?.telephone}})" name="call" ion-fab></ion-icon> 
              </ion-fab>

When i run the application i get this error:

vendor.js:107185 Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 11 in [callNumber({{myAccountData?.telephone}})] in ng:///AppModule/ProfilPage.html@30:22 ("
<ion-content no-padding>
        <ion-fab bottom right > 
            <ion-icon [ERROR ->](click)="callNumber({{myAccountData?.telephone}})" name="call" ion-fab></ion-icon> /// Here Guys
    "): ng:///AppModule/ProfilPage.html@30:22
Parser Error: Unexpected token {, expected identifier, keyword, or string at column 13 in [callNumber({{myAccountData?.telephone}})] in ng:///AppModule/ProfilPage.html@30:22 ("
<ion-content no-padding>
        <ion-fab bottom right > 
            <ion-icon [ERROR ->](click)="callNumber({{myAccountData?.telephone}})" name="call" ion-fab></ion-icon> /// Here Guys
    "): ng:///AppModule/ProfilPage.html@30:22
Parser Error: Missing expected : at column 38 in [callNumber({{myAccountData?.telephone}})] in ng:///AppModule/ProfilPage.html@30:22 ("
<ion-content no-padding>
        <ion-fab bottom right > 
            <ion-icon [ERROR ->](click)="callNumber({{myAccountData?.telephone}})" name="call" ion-fab></ion-icon> /// Here Guys
    "): ng:///AppModule/ProfilPage.html@30:22
Parser Error: Unexpected token } at column 38 in [callNumber({{myAccountData?.telephone}})] in ng:///AppModule/ProfilPage.html@30:22 ("
<ion-content no-padding>
        <ion-fab bottom right > 
            <ion-icon [ERROR ->](click)="callNumber({{myAccountData?.telephone}})" name="call" ion-fab></ion-icon> /// Here Guys
    "): ng:///AppModule/ProfilPage.html@30:22
Parser Error: Missing expected ) at column 39 in [callNumber({{myAccountData?.telephone}})] in ng:///AppModule/ProfilPage.html@30:22 ("
<ion-content no-padding>
        <ion-fab bottom right > 
            <ion-icon [ERROR ->](click)="callNumber({{myAccountData?.telephone}})" name="call" ion-fab></ion-icon> /// Here Guys
    "): ng:///AppModule/ProfilPage.html@30:22
Parser Error: Unexpected token ')' at column 40 in [callNumber({{myAccountData?.telephone}})] in ng:///AppModule/ProfilPage.html@30:22 ("
<ion-content no-padding>
        <ion-fab bottom right > 
            <ion-icon [ERROR ->](click)="callNumber({{myAccountData?.telephone}})" name="call" ion-fab></ion-icon> /// Here Guys
    "): ng:///AppModule/ProfilPage.html@30:22
Parser Error: Got interpolation ({{}}) where expression was expected at column 11 in [callNumber({{myAccountData?.telephone}})] in ng:///AppModule/ProfilPage.html@30:22 ("
<ion-content no-padding>
        <ion-fab bottom right > 
            [ERROR ->]<ion-icon (click)="callNumber({{myAccountData?.telephone}})" name="call" ion-fab></ion-icon> /// Here"): ng:///AppModule/ProfilPage.html@30:12, Directive Icon
Parser Error: Unexpected token {, expected identifier, keyword, or string at column 13 in [callNumber({{myAccountData?.telephone}})] in ng:///AppModule/ProfilPage.html@30:22 ("
<ion-content no-padding>
        <ion-fab bottom right > 
            [ERROR ->]<ion-icon (click)="callNumber({{myAccountData?.telephone}})" name="call" ion-fab></ion-icon> /// Here"): ng:///AppModule/ProfilPage.html@30:12, Directive Icon
Parser Error: Missing expected : at column 38 in [callNumber({{myAccountData?.telephone}})] in ng:///AppModule/ProfilPage.html@30:22 ("
<ion-content no-padding>
        <ion-fab bottom right > 
            [ERROR ->]<ion-icon (click)="callNumber({{myAccountData?.telephone}})" name="call" ion-fab></ion-icon> /// Here"): ng:///AppModule/ProfilPage.html@30:12, Directive Icon
Parser Error: Unexpected token } at column 38 in [callNumber({{myAccountData?.telephone}})] in ng:///AppModule/ProfilPage.html@30:22 ("
<ion-content no-padding>
        <ion-fab bottom right > 
            [ERROR ->]<ion-icon (click)="callNumber({{myAccountData?.telephone}})" name="call" ion-fab></ion-icon> /// Here"): ng:///AppModule/ProfilPage.html@30:12, Directive Icon
Parser Error: Missing expected ) at column 39 in [callNumber({{myAccountData?.telephone}})] in ng:///AppModule/ProfilPage.html@30:22 ("
<ion-content no-padding>
        <ion-fab bottom right > 
            [ERROR ->]<ion-icon (click)="callNumber({{myAccountData?.telephone}})" name="call" ion-fab></ion-icon> /// Here"): ng:///AppModule/ProfilPage.html@30:12, Directive Icon
Parser Error: Unexpected token ')' at column 40 in [callNumber({{myAccountData?.telephone}})] in ng:///AppModule/ProfilPage.html@30:22 ("
<ion-content no-padding>
        <ion-fab bottom right > 
            [ERROR ->]<ion-icon (click)="callNumber({{myAccountData?.telephone}})" name="call" ion-fab></ion-icon> /// Here"): ng:///AppModule/ProfilPage.html@30:12, Directive Icon
Parser Error: Got interpolation ({{}}) where expression was expected at column 11 in [callNumber({{myAccountData?.telephone}})] in ng:///AppModule/ProfilPage.html@30:22 ("ame="call" ion-fab></ion-icon> /// Here Guys
              </ion-fab>
  <ion-grid class="myContent" [ERROR ->]*ngIf="showInfoPers">
    
        <ion-row class="profileElements"vendor.js:83322)
    at TemplateParser.parse (vendor.js:107185)
    at JitCompiler._parseTemplate (vendor.js:116613)
    at JitCompiler._compileTemplate (vendor.js:116588)
    at vendor.js:116490
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (vendor.js:116490)
    at vendor.js:116360
    at Object.then (vendor.js:83311)
    at JitCompiler._compileModuleAndComponents (vendor.js:116359)
cordova.js:1218 deviceready has not fired after 5 seconds.
vendor.js:120753 Ionic Native: deviceready event fired after 3802 ms
2

Let’s pretend the elvis operator (?.) doesn’t exist, because (a) I think it improperly shifts responsibility into templates that should be kept in controllers, and (b) it will make this discussion easier.

The error message is telling you exactly what is wrong: it wants an expression, such as myAccountData.telephone, and you are giving it an interpolation. So just get rid of the {{}}.