Why component dont display variable of another component?

Question

I have 2 components: AppComponent and export class InnerComponent. AppComponent embed InnerComponent via @ViewChild. After that i need display to console variables value from InnerComponent. However i get error message to console because this.InnerComponent is undefined.

Please help me display a variable to console from AppComponent.

AppComponent:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild(InnerComponent) innerComponent: InnerComponent;

  ngAfterViewInit() {
    console.log(this.innerComponent); // undefined
    console.log(this.innerComponent.a); // error
  }
}

InnerComponent:

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

@Component({
  selector: 'app-inner',
  templateUrl: './inner.component.html',
  styleUrls: ['./inner.component.css'],
})
export class InnerComponent {
  a = 200;
}`enter code here`

live demo

Answer 1

Your app.component.html template doesn't actually contain the <app-inner> component. If you haven't put it in the template, it's not a child you can select with @ViewChild

Your template looks like this:

<div class="app">app:</div>

But it should look like this so the element can be selected

<div class="app">
  app:
  <app-inner></app-inner>
</div>

Live Demo