@ViewChild return undefined value.

Question

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 > Topic h1 > div > div >

Mukesh Nayak · Answer

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.

Mukesh Nayak · Answer

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 shukla · Answer

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.