title: Angular 8 - in my simple example, ViewChild() works only with an array but not with a variable
body: <p>How can I get this working: 
  I have a child component with an input field and a SEND button. On click the value should be rendered in the parent component. </p>
  
  <p>This setup works:
  The child component has an input that uses ngModel double-binding for the string. The button fires a function that pushes the current value of the input field into an array. The parent component uses ViewChild() and through a *ngFor loop every new value is rendered in the list. </p>
  
  <p>How can I implement this without an array but just a single value variable?
  The code that is commented-out (for array setup) works. 
  Stackblitz: <a href="https://stackblitz.com/edit/ng8child2parentviewchildtest?embed=1&amp;file=src/app/app.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/ng8child2parentviewchildtest?embed=1&amp;file=src/app/app.component.ts</a></p>
  
  <p>Any help is appreciated, thanks.</p>
  
  <pre><code>Child Component
  template:
  &lt;input type="text" [(ngModel)]="currentMsgToParent"&gt;
  &lt;button (click)="msgToParent()"&gt;send&lt;/button&gt;
  
  .ts:
  export class Child1Component {
    name = 'Child';
  
    currentMsgToParent = '';
    // msgFromChild1 = []
  
    msgToParent() {
      this.currentMsgToParent;
      // this.msgFromChild1.push(this.currentMsgToParent);
    }
  }
  
  parent component:
  template:
  &lt;div class="child1"&gt;
    &lt;p&gt;&lt;b&gt;Message from Child&lt;/b&gt;&lt;br&gt; via ChildView():&lt;/p&gt;
    &lt;p&gt;{{ currentMsgToParent }}&lt;/p&gt;
    &lt;!-- &lt;ul *ngFor="let item of msgFromChild1"&gt;
      &lt;li&gt;{{ item }}&lt;/li&gt;
    &lt;/ul&gt; --&gt;
    &lt;hr&gt;
    &lt;app-child1&gt;&lt;/app-child1&gt;
  &lt;/div&gt;
  
  ts.:
  export class AppComponent implements AfterViewInit {
    @ViewChild(Child1Component, {static: false}) child1: Child1Component;
  
    name = 'Parent';
    msgFromChild1: any;
    currentMsgToParent = '';
  
    ngAfterViewInit() {
      this.currentMsgToParent = this.child1.currentMsgToParent;
      // this.msgFromChild1 = this.child1.msgFromChild1;
    }
  }
  </code></pre>