@ViewChild component is undefined


I try to show an alert using ionic AlertController. I put it to it’s own component so I can reuse it

The component is lazy loaded

import { Component } from "@angular/core";
import { AlertController } from "ionic-angular";

  selector: 'forgot-password',
  templateUrl: 'forgot-password.html'
export class ForgotPasswordComponent {

  constructor(public alertCtrl: AlertController) {

  showPrompt() {
    let prompt = this.alertCtrl.create({
      title: 'Change Password',
      inputs: [
          name: 'email',
          placeholder: 'Email'
      buttons: [
          text: 'Cancel',
          handler: data => {
            console.log('Cancel clicked');
          text: 'Save',
          handler: data => {

  infoForNewPassword() {
    let alert = this.alertCtrl.create({
      title: 'Check your email',
      subTitle: 'I have send you a new password',
      buttons: ['Ok']

import { NgModule } from '@angular/core';

import { ForgotPasswordComponent } from './forgot-password.component';

    declarations: [ForgotPasswordComponent],
    exports: [ForgotPasswordComponent],

export class ForgotPasswordModule {}

the page where I try to acess the component:

  selector: 'page-login',
  templateUrl: 'login.html',
export class LoginPage {

  @ViewChild(ForgotPasswordComponent) forgotPass: ForgotPasswordComponent;

  user: User;
  loginForm: FormGroup;

    public navCtrl: NavController,
    public navParams: NavParams,
    private formBuilder: FormBuilder,
    private userService: UserService,
    private toastCtrl: ToastController,
    private jwtService: JwtService,
    public alertCtrl: AlertController
  ) { }

  ngOnInit() {

  ionViewCanEnter(): boolean {
    if (this.jwtService.getToken()) {
      return false;
    return true;

  ngAfterViewInit() {
    console.log('for some strange reason ForgotPasswordComponent is not instatiated:', this.forgotPass);
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';

  declarations: [
  imports: [
export class LoginPageModule {}


Why are you trying to access your component with a ViewChild at all???


Because I want to reuse it


That’s not answering my question.

Last time: Why are you trying to access your component with a ViewChild?


to showPrompt() on my page


Presumably you should should be putting the ion-button to access that function inside the component itself.

If it’s your jwtService which is responsible for the password change then add it to the component and do it directly.


Just to add to this components are supposed to be able to stand alone in their use encapsulating functionality.

The ViewChild is a last resort to gain access to the DOM.


The LoginPageModule needs to be importing the ForgotPasswordModule.


@rapropos Thank you for your answer. The problem it was becasue I forget to add the forgot-password element in login template.


Oh My God, this was so simple :slight_smile: I only had to use event subscribe and publish for this.

Subscribe for a event in my component and after my page DOM was finished (ionViewDidEnter) publish event with the data to be send to my component. Just that simple.