title: Angular DOM elements are not showing
body: <p>Hi I am using an UI Library (forced to, company issue..) which provides an Angular component, which renders a form. </p>
  
  <p>Now I want to disable all of the input fields an buttons inside this form. But the component of the library doesn't provide me the possibility to pass a parameter to change the status to read only. </p>
  
  <p>Now I have no other option to do dirty DOM hacking. However it doesn't seem to work.</p>
  
  <p>Here is my HTML of my own component, where I render the Library Component: </p>
  
  <pre><code>&lt;component-of-the-library #formComponent&gt;&lt;/component-of-the-library&gt;
  </code></pre>
  
  <p>Now inside my own components class I reference it:</p>
  
  <pre><code>@ViewChild('formComponent', {read: ElementRef}) formComponent: ElementRef;
  </code></pre>
  
  <p>However when I use the nativeElement feature and the querySelectorAll() function I don't see the button elements:</p>
  
  <pre><code>ngAfterViewInit() {                
    console.log(this.formComponent.nativeElement);
   console.log(this.formComponent.nativeElement.querySelectorAll('button'))
  }
  </code></pre>
  
  <p>The first line outputs the DOM of the library component. There I also see the buttons.</p>
  
  <p>However the second line just returns an empty NodeList. </p>
  
  <p>Am I missing something? </p>