viewchild component is undefined

Question

i'm trying to develop my first angular app and i'm running into trouble. I got the following code sample

AbstractComponent.ts

  export interface IComponent {
     getPageTitle(): string;
  }
    
  export abstract class AbstractComponent implements IComponent {
     getPageTitle(): string {
       throw new Error("Method not implemented.");
     }
  }

FirstComponent.ts

  export class FirstComponent implements OnInit, AbstractComponent {
  // do something
  }

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit, AfterViewInit {

  @ViewChild(AbstractComponent) child: IComponent;
    // ...
    onButtonClicked(): void {
      console.log(this.child);
      console.log(this.child.getPageTitle());
  }

app.component.html

  <header>
    <!-- some header stuff --> 
  </header>
  <main>
    <router-outlet></router-outlet>
    <!-- some main stuff -->
  </main>

Why is "this.child" always empty? Is it possible to call a method of a child component in parent component.

Answer 1

From my perspective you're using @ViewChild() wrong here. You always need a hash tag in the HTML-template in order to reference to the child.

Something like this

HTML-Template

<my-component #myChild>
    <!-- some other HTML -->
</my-component>

TS-File

@ViewChild('myChild') child: IComponent;

Here is what the makers of Angular have to say: https://angular.io/api/core/ViewChild