title: How can I access DOM elements in angular
body: <p>I am tetsing a template driven form in angular, just testing not validating it.
  I have read that it can be done using a viewChild property but it seems to not work for me.</p>
  
  <p>I create a reference like this in my one of my forms label:</p>
  
  <pre><code>&lt;label #ref  id=.. class=...&gt;
  </code></pre>
  
  <p>And now in my component I do this:</p>
  
  <pre><code>@ViewChild('ref') ref:ElementRef;
  </code></pre>
  
  <p>So, I suppose I created a valiable of type ElementRef that is  viewChild of my input. So now I can use <strong>ref</strong> in my tests.</p>
  
  <p>Inside my tests I do this:</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-html lang-html prettyprint-override"><code>let ref: HTMLElement:
  
  it(....=&gt;
  {
  ref = fixture.debugElement.query(By.css('ref')).nativeElement;
  fixture.detectChanges();
  expect(ref.innerHTML)toContain('Name');// or whatever
  }
  
  )</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now consider that the test, html and component files are separated from one another.</p>
  
  <p>I still get errors of <strong>nativeElemnt property cannot be read.</strong>  eventhough I have imported ElemntRef.</p>
  
  <p>Is this the right way to access the DOM elemnts?? Or this viewChild doesnt make a referece to my label??</p>
  
  <p>And again can I use the ID to access the form elements? What I have read they use a reference with #.</p>
  
  <p>Thanks!!</p>