title: Angular: Cannot get ElementRef property
body: <p>I have the following code cloning <em>this.child</em> into <em>obj</em> in <em>ngAfterViewInit</em> method:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, Input, ViewChild, ElementRef } from '@angular/core';
  
  @Component({
    selector: 'child',
    template: `&lt;input [value]="value"&gt;`,
  })
  export class ChildComponent {
    @Input() value: string;
  }
  
  @Component({
    selector: 'app-root',
    template: '&lt;child [value]="value" #child&gt;&lt;/child&gt;',
  })
  export class AppComponent {
    value = 'Some value';
  
    @ViewChild('child') child: ElementRef;
  
    ngAfterViewInit() {
      var obj: any = {};
      for (let prop in this.child)
        obj[prop] = (this.child as any)[prop];
      console.log('ngAfterViewInit', obj);
      // console.log('ngAfterViewInit', this.child.value); // but this line doesn't work!
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Please, see the source <a href="https://stackblitz.com/edit/angular-ivy-rhacx7?file=src/app/app.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-rhacx7?file=src/app/app.component.ts</a></p>
  <p>It works fine and logged <em>obj</em> contains <em>value</em> property! But when I uncomment the last line of <em>ngAfterViewInit</em> method, it crashes with error:
  <em>Property 'value' does not exist on type 'ElementRef'</em></p>
  <p>I have tried <em>this.child.nativeElement.value</em> but this one leads to another error:
  <em>Cannot read properties of undefined (reading 'value')</em></p>
  <p>So, <em>value</em> property &quot;<strong>does not</strong> exist in <em>this.child</em>&quot; but it <strong>does</strong> exist in <em>obj</em> (a clone of the former!). Why is it so?</p>
  <p>And why do I bother myself with &quot;clone operations&quot;? Because when I simply logged <em>this.child</em> into the console it <strong>did</strong> contain <em>value</em> property! I thought, maybe it was added <strong>after</strong> <em>ngAfterViewInit</em> but <strong>before</strong> logging to the console? That is why I copied the state of <em>this.child</em> that it had <strong>during</strong> <em>ngAfterViewInit</em>.</p>
  <p>So, please, can somebody explain:</p>
  <ol>
  <li>Why does the linked code not work?</li>
  <li>Why view elements are not initialized with their input parameters before the moment <em>ngAfterViewInit</em>?</li>
  </ol>