How to call a navigated page (2nd page) as event?

Friends,
I am new to ionic 3 . I have a a navigated page where some values show in detail view. I have a button with title “Pay” to call a web page for payment purpose using inappweb browser. But i could not call any function in second page…

my pay.ts controller is

 import { Component, OnInit } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { InAppBrowser, InAppBrowserOptions } from "@ionic-native/in-app-browser";
    
    @IonicPage()
    @Component({
     selector: 'page-pay',
     templateUrl: 'pay.html',
    })
    export class PayPage {
    
      param1 : any;
      param2 : any;
      param3 : any;
      param4 : any;
      param5 : any;
      param6 : any;
      url : string;
    constructor(public navCtrl: NavController, public navParams: NavParams,private inAppBrowser: InAppBrowser) {
       this.param1 = navParams.get('param1');
       this.param2 = navParams.get('param2');
       this.param3 = navParams.get('param3');
       this.param4 = navParams.get('param4');
       this.param5 = navParams.get('param5');
       this.param6 = navParams.get('param6');
       //this.openWebpage(this.url);
     }
     /*openWebpage(url: string) {
      const options: InAppBrowserOptions = {
        zoom: 'no'
      }
     }
     browser = this.inAppBrowser.create(this.url, '_self');*/
    
     ionViewDidLoad() {
       console.log('ionViewDidLoad PayPage');
     }
    
    }

Here I could not call ‘openWebpage()’ (which is commented) from my html (template) as shown

  <ion-header>
    
      <ion-navbar>
        <ion-title>Pay</ion-title>
      </ion-navbar>
    
    </ion-header>
    
    <ion-content padding>
      <h4> Building Details </h4>  
      <div *ngIf="param6 == 5 || param6 == 3">
      
      <ion-list *ngFor="let item of param1">
       <ion-item>
         <ion-label>Building ID: {{item.numBuildingID}}</ion-label>
       </ion-item>
    
       <ion-item>
           <ion-label>Ward Year: {{item.intWardYearID}}</ion-label>
       </ion-item>
    
       <ion-item>
          <ion-label>Ward No/Door No: {{item.intWardNo}}/{{item.intDoorNO}}</ion-label>
        </ion-item>
    
        <ion-item>
            <ion-label>Owner/s Name: {{item.chvownerEng}}</ion-label>
          </ion-item>
    
          <ion-item>
              <ion-label>Building Category: {{item.intBuildingCategory}}</ion-label>
            </ion-item>
            <ion-item>
                <ion-label>Annual PTax: {{item.ptaxnew}}</ion-label>
            </ion-item>  
            <ion-item>
                <ion-label>Annual Library Cess: {{item.lcnew}}</ion-label>
            </ion-item> 
            <ion-item>
                <ion-label>Service Cess: {{item.sernew}}</ion-label>
            </ion-item>
    
            <ion-item>
                <ion-label>Surcharge: {{item.surnew}}</ion-label>
            </ion-item> 
        </ion-list>
    </div> 
    <div *ngIf="param6 == 4">
            <ion-list *ngFor="let item of param1">
                    <ion-item>
                      <ion-label>Building ID: {{item.numBuildingID}}</ion-label>
                    </ion-item>
                
                    <ion-item>
                       <ion-label>Ward No/Door No: {{item.intWardNo}}/{{item.intDoorNo1}}</ion-label>
                     </ion-item>
                 
                     <ion-item>
                         <ion-label>Owner/s Name: {{item.chvOwners}}</ion-label>
                       </ion-item>
                 
                       <ion-item>
                           <ion-label>Building Category: {{item.chvCategory}}</ion-label>
                       </ion-item>
                       <ion-label>Description in AR: </ion-label>
                        <ion-item *ngFor="let item of param1">{{item.chvBuildDescInAREng}}</ion-item>
                       <ion-item>
                             <ion-label>Annual PTax: {{item.PTax}}</ion-label>
                         </ion-item>  
                         <ion-item>
                             <ion-label>Annual Library Cess: {{item.LC}}</ion-label>
                         </ion-item> 
               
                         <ion-item>
                             <ion-label>Surcharge: {{item.Column1}}</ion-label>
                         </ion-item> 
                         <ion-item>
                            <ion-label>Last Updated as per Assessment Register: {{item.dtLastUpdatedDateTime | date:'d/M/yyyy'}}</ion-label>
                         </ion-item>  
                     </ion-list>
    
    </div>
       
      <h4>Pending Demand</h4>
     
      <table>
          <tr>
            <td>Total Pending Demand (Rs.):</td>
            <td>{{ param3 }}</td>
          </tr>
          <tr>
            <td>Penal (Rs.):</td>
            <td>{{ param4 }}</td>
          </tr>
          <tr>
              <td>Total Tax Payable (Rs.):</td>
              <td>{{ param5 }}</td>
          </tr>
      </table>    
    
      <table *ngIf="param3 !== 0">
          <tr>
    
              <th>Year-Period</th>
    
              <th>Account Head</th> 
    
              <th>Amount</th>
    
          </tr>
    
          <tr *ngFor="let pending of param2">
              <td>{{pending.chvPrintText}} {{pending.chvPeriod}}</td>
              <td *ngIf="pending.intAccountHeadId==1">Property Tax</td>
              <td *ngIf="pending.intAccountHeadId==2">Library Cess</td>
              <td>{{pending.fltAmount}}</td>
          </tr>
          <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>Total : {{ param3 }}</td> 
         </tr>
    
    
      </table>  
    
     <button *ngIf="param3 !== 0" ion-button onclick="openWebpage('https://google.co.in')">Pay</button>
    
    </ion-content>

How this event call can be done ?

Please advise with a sample code

Thanks

Anes