How to call a button click event on the navigated second page?

@anespa wrote:

Friends,
I have a detailed page from a search , where the parameters passed through Navigation (Navparam). In the second page I have a Pay Button . I need to call a function on second page
to inappwebbrowser with some POST parameter data. But I have no idea where to write the button click event .

My .ts and .html files are

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { InAppBrowser, InAppBrowserOptions } from "@ionic-native/in-app-browser";
//import { InAppPurchase } from '@ionic-native/in-app-purchase';

@IonicPage()
@Component({
 selector: 'page-pay',
 templateUrl: 'pay.html',
})
export class PayPage implements OnInit {

  param1 : any;
  param2 : any;
  param3 : any;
  param4 : any;
  param5 : any;
  param6 : any;
  url : string;
constructor(public navCtrl: NavController, public navParams: NavParams,private iab: 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);
 }

 ngOnInit(){

  const browser = this.iab.create('https://www.techiediaries.com','_self');

}
 /*openWebpage(url: string) {
  const options: InAppBrowserOptions = {
    zoom: 'no'
  }
 }
 browser = this.inAppBrowser.create(this.url, '_self');*/

 ionViewDidLoad() {
   console.log('ionViewDidLoad PayPage');
 }

}

html file

<!--
  Generated template for the PayPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<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>

Any body please advise . I am searching this for 4 hours

Thanks

Anes

Posts: 1

Participants: 1

Read full topic