Angular 2 access component from another component

Question

I have a page with two components on it:

Page({
    template: '<ion-navbar *navbar class="contact_navbar">
                    <ion-title>Loan Calculator</ion-title>
                </ion-navbar>
                <ion-content><ck-auto-loan-calculator type="normal"></ck-auto-loan-calculator></ion-content><ck-keypad id="keypad"></ck-keypad>',
    directives: [[ckAutoLoanCalculator], [Keypad]]
})
export class LoanCalculator {}

Now inside ck-auto-loan-calculator I have a button that has: (click)="showKeypad()"

The showKeypad() function used to have let k = this.app.getComponent('keypad'); and this was accessing the <ck-keypad> component

Now since ionic changed to beta 7 and angular changed to RC, I get the following error: ORIGINAL EXCEPTION: TypeError: Cannot read property 'setControl' of undefined

How can I make the keypad component accessible in the Ck-auto-loan-calculator component ?

Thank you

Answer 1

Ionic 2 getComponent has been deprecated, you can pass the component as an input to another component.

You can pass it from the template using this syntax:

<ck-auto-loan-calculator type="normal" [keypad]="keypad"></ck-auto-loan-calculator>
<ck-keypad #keypad></ck-keypad>

Then in the ckAutoLoanCalculator

  @Input() keypad: Keypad

anywhere in your ckAutoLoanCalculator

  this.keypad.open() // assumes there's a public method on keypad component called open

Plunker for passing components as inputs, did the example with a modal component for illustration