@ViewChild can't access properties of child component in Angular

Question

I have a child and a parent component. In the child I have defined a property which I want to access via the @ViewChild directive and console.log its value. But I always get the type is not defined error. What am I missing? I also use the console.log in afterViewInit() to make sure the child is rendered.

This is the Parent:

import { Component, AfterViewInit, ViewChild, } from '@angular/core';
import { HoseComponent } from '../hose/hose.component';

@Component({
  selector: 'app-knop',
  templateUrl: './knop.component.html',
  styleUrls: ['./knop.component.css']
})
export class KnopComponent implements AfterViewInit {

  @ViewChild(HoseComponent) hose!: HoseComponent;

  ngAfterViewInit(): void {
    console.log(this.hose.spliff)
  }
} 

and this is the child:

import { Component} from '@angular/core';

@Component({
  selector: 'app-hose',
  templateUrl: './hose.component.html',
  styleUrls: ['./hose.component.css']
})
export class HoseComponent {
spliff = 89
}

Answer 1

Have you added #hose! to your parent markup? Stmh like:

<h1>Parent scope</h1>
<app-hose #hose!></app-hose>