Can't access imported component via View Child in Angular2-RC4

2
votes

This is my code, however I am getting undefined errors:

import {IONIC_DIRECTIVES} from 'ionic-angular'

@Component({
    selector:       'personal-info', 
    templateUrl:    'build/pages/transaction/personal-info/personal-info.html',
    directives:     [IONIC_DIRECTIVES]
})

export class PersonalInfoPage {

    infoForm: ControlGroup

    constructor (
        private formBuilder: FormBuilder, 
    ) {
        this.infoForm = formBuilder.group({//...})
    })
}

import {PersonalInfoPage} from './personal-info/personal-info'

@Component({
    templateUrl:    'build/pages/transaction/transaction.html',
    directives:     [PersonalInfoPage,PaymentDetailsPage,AddressPage,IdentityPage],
})

export class TransactionPage implements AfterViewInit {

    @ViewChild('PersonalInfoPage')      personalInfo:   PersonalInfoPage
    @ViewChild('PaymentDetailsPage')    paymentDetails: PaymentDetailsPage
    @ViewChild('AddressPage')           address:        AddressPage
    @ViewChild('IdentityPage')          identityPage:   IdentityPage

    constructor(
    ) {}

    ngAfterViewInit () {
        console.log(this.personalInfo.infoForm.valid);
    }

Error in Browser:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./TransactionPage class TransactionPage_Host - inline template:0:0 ORIGINAL EXCEPTION: TypeError: Cannot read property 'infoForm' of undefined

Any ideas what I am missing?

1
typescriptangularionic2

1 Answers

3
votes

Remove the '

@ViewChild(PersonalInfoPage)

If you query for a type use the type. If you query for a template variable use a string.

@ViewChild(PersonalInfoPage)      personalInfo:   PersonalInfoPage
@ViewChild(PaymentDetailsPage)    paymentDetails: PaymentDetailsPage
@ViewChild(AddressPage)           address:        AddressPage
@ViewChild(IdentityPage)          identityPage:   IdentityPage