Ionic 3 Segment ngAfterViewInit not working

Question

I am trying to use Ionic 3 Segment on a page that fetches some data from a third party script, but Ionic3 or Angular4 is not binding the changes on the ionic-segment tag.

Ionic is not activating the selected button, nor is the ngSwitch working at all.

The third party library is sucessfully requested on ngOnInit() method, and the page is rendered, but with no events bound at all.

But when the code executes:

this.segment.ngAfterViewInit();

A TypeScript error is triggered:

Property 'ngAfterViewInit' does not exist on type 'Segment'.

Here is my Checkout page:

import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
import {IonicPage, NavController, NavParams, Segment} from 'ionic-angular';
import {CartProvider} from "../../providers/cart/cart";

export class CheckoutPage implements OnInit {

    @ViewChild(Segment)
    segment: Segment;

    paymentMethod: string = "CREDIT_CARD";
    paymentMethods: Array<any> = new Array();

    creditCard = {
        num: '',
        cvv: '',
        monthExp: '',
        yearExp: '',
        brand: '',
        token: ''
    };

    constructor(public navCtrl: NavController,
                public navParams: NavParams,
                private cart: CartProvider,
                private ref: ChangeDetectorRef) {
    }

    ngOnInit() {
        PagSeguroDirectPayment.getPaymentMethods({
            amount: this.cart.total,
            success: response => {
                let paymentMethods = response.paymentMethods;
                this.paymentMethods = Object.keys(paymentMethods)
                    .map((key) => paymentMethods[key]);
                this.ref.detectChanges();
                this.segment.ngAfterViewInit();
            }
        });
    }
}

And here is my checkout template:

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Checkout</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>

    <ion-segment [(ngModel)]="paymentMethod">
        <ion-segment-button *ngFor="let p of paymentMethods" value="{{p.name}}">
            {{p.name}}
        </ion-segment-button>
    </ion-segment>
    <div [ngSwitch]="paymentMethod">
        <div *ngSwitchCase="'BOLETO'">
            <ion-card>
                <ion-card-header>
                    Total: <strong>{{cart.total}}</strong>
                </ion-card-header>
            </ion-card>
            <ion-card>
                <button ion-button>Generate</button>
            </ion-card>
        </div>
        <div *ngSwitchCase="'CREDIT_CARD'">
            <ion-list>
                <ion-item>
                    <ion-label>Card Number</ion-label>
                    <ion-input type="text" value="" [(ngModel)]="creditCard.num"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>CVV</ion-label>
                    <ion-input type="text" value="" [(ngModel)]="creditCard.cvv"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>Month</ion-label>
                    <ion-input type="text" [(ngModel)]="creditCard.monthExp"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>Year</ion-label>
                    <ion-input type="text" [(ngModel)]="creditCard.yearExp"></ion-input>
                </ion-item>
            </ion-list>
            <button (click)="runPayment()" ion-button>Pay</button>
        </div>
    </div>
    <ion-list>
        <ion-item *ngFor="let i of cart.items">
            {{i.name}} - R$ {{i.price}}
        </ion-item>
    </ion-list>
    <button (click)="goToCheckout()" ion-button>Checkout</button>
</ion-content>

Here are my specifications:

Ionic Framework: 3.6.0
Ionic App Scripts: 2.1.3
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 8.1.2
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36

I am used to Ionic 2, and all that code run like a charm. No clue at all how to solve it!

Answer 1

You can use ionViewDidLoad() rather than ngAfterViewInit()

Entering into the page view :

1. ionViewCanEnter()
2. ionViewDidLoad()
3. ionViewWillEnter()
4. ionViewDidEnter()

Exit from page view:

5. ionViewWillLeave()

6. ionViewDidLeave