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

@anespa wrote:

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

Posts: 1

Participants: 1

Read full topic