ViewChild element ref can be accessed in ngAfterViewInit() cycle the earliest.

@Component({
  selector: 'hello',
  template: `<h1>this is Hello component {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent implements AfterViwInit {
  @Input() name: string;
  @ViewChild('TestChildComponent') testChildComponent: TestChildComponent

  ngAfterViewInit() {
    console.log('calling ngOninit in hello component');
    console.log('going to call test child instance 
    this.TestChildComponent.ngOninit')
    console.log(this.testChildComponent);
  }
}

Angular doc says we should use the child component injected by ViewChild in ngAfterViewInit. But sometimes you even can’t get it in ngAfterViewInit. The reason is, the child component is not created yet when AfterViewInit hook runs. For such a case you would have to wait more (using a setTimeout would work but it's a bad idea). Other option would be to have the child emit something to the parent, letting it know the child has been rendered and then the parent can query it.

ViewChild element ref can be accessed in ngAfterViewInit() cycle the earliest.

Angular doc says we should use the child component injected by ViewChild in ngAfterViewInit. But sometimes you even can’t get it in ngAfterViewInit. The reason is, the child component is not created yet when AfterViewInit hook runs. For such a case you would have to wait more (using a setTimeout would work but it's a bad idea). Other option would be to have the child emit something to the parent, letting it know the child has been rendered and then the parent can query it.

But your case is that sibling HelloComponent wants to query sibling TestChildComponent it can't do that. TestChildComponent is just not in the scope for HelloComponent. Easiest solution would be to query TestChildComponent from the parent AppComponent.

You should also add #TestChildComponent to access the ref.

<app-test-child #TestChildComponent childname="{{ name }}"></app-test-child>

Working example: https://stackblitz.com/edit/angular-ivy-j5ceat?file=src%2Fapp%2Fapp.component.html

ViewChild element ref can be accessed in ngAfterViewInit() cycle the earliest.

@Component({
  selector: 'hello',
  template: `<h1>this is Hello component {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent implements AfterViwInit {
  @Input() name: string;
  @ViewChild('TestChildComponent') testChildComponent: TestChildComponent

  ngAfterViewInit() {
    console.log('calling ngOninit in hello component');
    console.log('going to call test child instance 
    this.TestChildComponent.ngOninit')
    console.log(this.testChildComponent);
  }
}

ViewChild element ref can be accessed in ngAfterViewInit() cycle the earliest.

@Component({
  selector: 'hello',
  template: `<h1>this is Hello component {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent implements AfterViwInit {
  @Input() name: string;
  @ViewChild('TestChildComponent') testChildComponent: TestChildComponent

  ngAfterViewInit() {
    console.log('calling ngOninit in hello component');
    console.log('going to call test child instance 
    this.TestChildComponent.ngOninit')
    console.log(this.testChildComponent);
  }
}

Angular doc says we should use the child component injected by ViewChild in ngAfterViewInit. But sometimes you even can’t get it in ngAfterViewInit. The reason is, the child component is not created yet when AfterViewInit hook runs. For such a case you would have to wait more (using a setTimeout would work but it's a bad idea). Other option would be to have the child emit something to the parent, letting it know the child has been rendered and then the parent can query it.