@ViewChild return undefined value.

amit shukla

Error : @ViewChild(CommonComponent) _comComponent:CommonComponent; viewchild is giving undefine value of _comcomponent.

I have a Parent component called AMLTrainingComponent and child component called CommonComponent .

CommonComponent has a function name setMsg. I want call child component function with in parent function but viewchild return undefine value.

Child Component :

import { Component} from '@angular/core';
@Component({
selector:"common-app",
template:`{{errorMessage12}}`
})
export class CommonComponent {
errorMessage12: string;
setMSG(result: any)
{
this.errorMessage12 = result
}
}

And parent component

import { Component, ViewChild } from "@angular/core"
import { AMLTraingService } from '../../../bl/services/amltraining.service'
import { CommonComponent } from '../../common/common.component'
@Component({
selector: "AMLTraining-app",
providers: [AMLTraingService],
templateUrl: `/app/gecl/ComplianceSetUP/AMLTraining/AMLTraining.html`
})
export class AMLTrainingComponent {
@ViewChild(CommonComponent) _comComponent:CommonComponent; // use of child component
constructor() { }
addTopic(): void {
this._amlTrainingService.addTopic(this.amlTrainingModel).subscribe(result => {
this._comComponent.setMSG(result) // In this line this._comComponent give undefined value
});
}
}

Parent html like below

<common-app>common-app> we use common selector on parent html
<div class="page-head">
<div class="page-title">
<h1>Topich1>
div>
div>

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mukesh Nayak8y ago
Hi Amit,
I think the problem is there in the constructor of your parent component.Your "AMLTraingService" service should be injected which is missing in your case.
Please change
constructor() { }
to
constructor(private _amlTrainingService: AMLTraingService) { }
Regards,
Mukesh Nayak
amit shukla8y ago
Hi Mukesh,

AddTopic function is calling at the button click event, which is defined in parent component html. Please do not define it on ngafterviewinit event becasue it is saving the record.

When we call a parent component then viewchild automatically created the object of child component, So my question is that when we call parent component, viewchild is not creating the object of child component.
you can see this with debugging when call the constrctor.
Mukesh Nayak8y ago
Hi Amit,
This is nown issue where we need to call @viewchild component after the view is initialized. In your parent component please modify the code as below:
import { Component, ViewChild,  AfterViewInit } from "@angular/core"
import { AMLTraingService } from '../../../bl/services/amltraining.service'
import { CommonComponent } from '../../common/common.component'
@Component({
selector: "AMLTraining-app",
providers: [AMLTraingService],
templateUrl: `/app/gecl/ComplianceSetUP/AMLTraining/AMLTraining.html`
})
export class AMLTrainingComponent {
@ViewChild(CommonComponent) _comComponent:CommonComponent; // use of child component
constructor() { }
ngAfterViewInit() {
  addTopic();
}
addTopic(): void {
this._amlTrainingService.addTopic(this.amlTrainingModel).subscribe(result => {
this._comComponent.setMSG(result) // In this line this._comComponent give undefined value
});
}
}
This should work.