title: input property is undefined in child component
body: <p>I have some cards. Clicking on these cards emits an event and pass data to an other component. This works fine, the data is passed. Now, based on this data, I create a filtered array and assign it to an input property of a dialog component. And after that if this is set, I show this dialog component.</p>
  <p>Here is some code:</p>
  <p>This is my dialog component in the parent, which will be shown, if the input property is set:</p>
  <p>Selector in the parent component:</p>
  <pre><code>&lt;version-selector [versions]=&quot;provkVersions&quot;&gt;&lt;/version-selector&gt;
  </code></pre>
  <p>Ts file of the dialog component:</p>
  <pre><code>import { Component, Input } from '@angular/core';
  import { ProvkVersion } from '../../models/provkversion.model';
  
  @Component({
    selector: 'version-selector',
    templateUrl: './ver-sel.component.html',
    styleUrls: [],
  })
  export class VersionSelectorComponent {
    hovered = false;
    formVisible = false;
  
    @Input() set versions(provkVersions: ProvkVersion[]) {
      this.formVisible = provkVersions !== undefined;
    }
  
    closeForm() {
      this.versions = undefined!;
    }
  }
  </code></pre>
  <p>So, <code>provkVersions</code> is set and the dialog is shown. This is the dialog template:</p>
  <pre><code>&lt;kendo-dialog
    *ngIf=&quot;formVisible&quot;
    [width]=&quot;800&quot;
    [height]=&quot;600&quot;
    (close)=&quot;closeForm()&quot;
  &gt;
    &lt;kendo-dialog-titlebar&gt;Verziók&lt;/kendo-dialog-titlebar&gt;
    &lt;kendo-card width=&quot;500px&quot; *ngFor=&quot;let version of versions&quot;&gt;
      &lt;kendo-card-header class=&quot;k-hstack&quot;&gt;
        &lt;div&gt;
          &lt;h1 kendoCardTitle&gt;Verzió {{ version.version }}&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div style=&quot;font-weight: bold&quot;&gt;
          {{ version.year }} / {{ version.month }}
        &lt;/div&gt;
      &lt;/kendo-card-header&gt;
      &lt;kendo-card-body&gt;
        &lt;h2&gt;BA&lt;/h2&gt;
      &lt;/kendo-card-body&gt;
    &lt;/kendo-card&gt;
  &lt;/kendo-dialog&gt;
  </code></pre>
  <p>As you see, I want to iterate through <code>versions</code>, but it is undefined, even if the <code>provkVersions</code> has the right data (I have checked it).</p>
  <p>I found this <a href="https://stackoverflow.com/questions/45239739/angular2-ngfor-does-not-update-when-array-is-updated">question</a> and tested all the workarounds/solutions, but none of them did work.</p>
  <p>What is happening here?</p>
  <p>If I store the passed data in a regular property like this:</p>
  <pre><code>provkVersions!: ProvkVersion[];
  
    @Input() set versions(provkVersions: ProvkVersion[]) {
      this.formVisible = provkVersions !== undefined;
      this.provkVersions = provkVersions;
    }
  </code></pre>
  <p>And change the template like this:</p>
  <pre><code>&lt;kendo-card width=&quot;500px&quot; *ngFor=&quot;let version of provkVersions&quot;&gt;
  </code></pre>
  <p>It works, I get my cards, but it should work without an extra property. It should work with the input property.</p>
  <p><strong>EDIT:</strong></p>
  <p>I tested it with a 'normal' input property (without the setter) and of course it worked. So, it seems to me, that this is intended. Because if I search on the net after this, I see, that everywhere there is used another (private) property to hold the value.</p>