Как получить доступ к функции в компоненте viewchild, который заключен внутри шаблона div

Question

Мне не удалось получить доступ к функции возврата дочернего компонента из родительского компонента. Я поместил компонент host-Settings вне шаблона div, чтобы иметь к нему доступ, есть ли другой способ получить к нему доступ внутри шаблона div? или есть другой способ * ngFor для другого компонента вместо * ngTmeplateOutlet?

       // parent component.html
       <nav class="sidenav">
            <section class="sidenav-content">
                <a *ngFor="let navItem of navItems" 
                        (click)="select(navItem)">
                    {{navItem?.name}}
                </a>
            </section>
        </nav>
        <div class="col-xs mx-3">
            <ng-container *ngTemplateOutlet="selected?.template"></ng-container>
        </div>

        <ng-template #hostsTemplate>
            <hosts-settings #hosts></hosts-settings> // having problem access the function for host component
        </ng-template>

        <ng-template #interfaceTemplate>
           <interface-settings></interface-settings>
        </ng-template>

   // parent component.ts
   import { Component, ViewChild, TemplateRef, AfterViewInit } from '@angular/core';

   export class SettingsComponent implements  OnInit, AfterViewInit {
       @ViewChild('hostsTemplate', {static: false})
       public hostsTemplate: TemplateRef<any>;

       @ViewChild('interfaceTemplate', {static: false})
       public interfaceTemplate: TemplateRef<any>;

       ngAfterViewInit() {
          this.navItems.push(
             { name: 'Interface', template: this.interfaceTemplate },
             { name: 'Hosts', template: this.hostsTemplate },
             { ...},
             { ...},
          );
          this.selected = this.navItems[0];
    }

      revert() {
       // having problem to assess the function in the hostcomponent (viewChild) because it is being wrapped by template
         this.hostsTemplate.revert();
       }

      select(navItem) {
        this.selected = navItem;
      }

   }

   //child-component.ts
   inside the host-setting.component.ts has the revert function

Мне не удалось получить доступ к функции возврата host-settings.component.ts из родительского компонента.