@ViewChild component is undefined

Ionic Framework ionic-v3
1

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";

@Component({
  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 => {
            this.infoForNewPassword();
          }
        }
      ]
    });
    prompt.present();
  }

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



}

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


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

@NgModule({
    declarations: [ForgotPasswordComponent],
    exports: [ForgotPasswordComponent],
    
})

export class ForgotPasswordModule {}

the page where I try to acess the component:

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  @ViewChild(ForgotPasswordComponent) forgotPass: ForgotPasswordComponent;

  user: User;
  loginForm: FormGroup;

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

  ngOnInit() {
    this.createForm();
  }

  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';

@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage)
  ]
})
export class LoginPageModule {}
2

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

3

Because I want to reuse it

4

That’s not answering my question.

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

5

to showPrompt() on my page

6

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.

7

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.

8

The LoginPageModule needs to be importing the ForgotPasswordModule.

9

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

11

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.