Accessing the child component residing under ng-component with ViewChild in Angular

Question

I have parent component, there is a ng-template section. Under this ng-template section there is a Child Component. Now I would like to access this child component with ViewChild decorator. After getting with ViewChild I want to execute a function of that child component. But it’s not working. The code is below:

<ng-template #mymodal let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Bootstrap Modal</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <app-expense-head #child></app-expense-head>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
    <button type="button" class="btn btn-outline-dark" (click)="onClickCancel()">Cancel</button>
  </div>
</ng-template>

TS file code

@ViewChild(ExpenseHeadComponent, { static: false }) childExpenseHead: ExpenseHeadComponent;

onClickCancel() {
    this.childExpenseHead.myAlert();    
  }

question from:https://stackoverflow.com/questions/65644352/accessing-the-child-component-residing-under-ng-component-with-viewchild-in-angu

Answer 1

Try accessing child value on ngAfterViewInit() { } life cycle hook.