@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>