Angular: How can I access Child Component template variable in parent Component?

Question

I am trying to access #temp of modalconfirm.component.html in parent app.component.ts but its always null.

modalconfirm.component.html

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
<br><br>
<pre class="card card-block card-header">{{message}}</pre>
<ng-template #template>
  <div class="modal-body text-center">
    <p>Do you want to confirm?</p>
    <button type="button" class="btn btn-default" (click)="confirm()" >Yes</button>
    <button type="button" class="btn btn-primary" (click)="decline()" >No</button>
  </div>
</ng-template>

app.component.ts

import { Component, TemplateRef, ViewChild, ElementRef } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';

import { BsModalService } from 'ngx-bootstrap/modal';
import { ModalcomfirmComponent } from './modalcomfirm/modalcomfirm.component';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',

   template:`
  <modalcomfirm ></modalcomfirm>

  <table>
  <tr><td><div (click)="TestChild()">1</div></td></tr>
  <tr><td><div>2</div></td></tr>
  ` 
 // styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  @ViewChild("template") inputChild: ElementRef;

  @ViewChild(ModalcomfirmComponent ) child: ModalcomfirmComponent; 
TestChild(){
  console.log(this.inputChild); //undefined

}
ngOnInit(){

}
  confirmParent(evt) {
    console.log(evt);
 }

}

Answer 1

You can't access template variable of child components directly.

Template variables can only be referenced in the same tamplate you define them.

But if you are trying to get the result (confirm/decline) value from the modal child component, you can do it through @Output decorator and EventEmitters.

See Angular - Component Interaction and Angular - Template Syntax > Input and Output properties

Also, take a look here to read about smart (containers) and dumb (presentational) components.

Answer 2

Hello try by using you the @Input and @Output decorators on properties to communicate between the two components.

The Output decorator works like callback to return a value from child component, and the Input is used to send a parameter to a child component.

Example:

    import { Component, Input, EventEmitter, Output } from '@angular/core';

    @Component({
        selector: 'child-element',
        templateUrl: './child.component.html',
        styleUrls: ['./child.component.css']
    })
    export class ChildComponent implements OnChanges {
        @Input() value: number;
        counter: number;
        @Output() valueOutput: EventEmitter<string> =
                new EventEmitter<string>();

        ngOnChanges(): void {
            this.counter++;
            this.value= this.counter;

            this.valueOutput.emit(`The value${this.value} isChanged!`); 

        }

    }

//this.valueOutput.emit must be used when you want to return a value to the parent component

//implementation in parent  html templeate
<child-element [value]='valueInParent' (valueOutput)='functionInParent()' ></child-element>

valueInParent is going to be a parameter or value that you want to send to child component, and functionInParent is going to be a function in your parent component, it resieve as a callback the child response.

Answer Reference