title: How do I unit test if an element is visible when the *ngIf directive is used using Jasmine in Angular
body: <p>I have an Angular 6 app and writing some unit tests trying to determine if an element is visible or not based solely on the boolean result of an <code>*ngIf</code> directive.</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="header" *ngIf="show"&gt;
      &lt;div&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>spec file:</p>
  
  <pre><code>it('should hide contents if show is false', () =&gt; {
      const button = debugElement.query(By.css('button')).nativeElement;
      button.click();   // this will change show to false
      fixture.detectChanges();
      expect(debugElement.query(By.css('.header')).nativeElement.style.hidden).toBe(true);
  });
  </code></pre>
  
  <p>I can't seem to get the <code>hidden</code> attribute from the div.  Does angular use another approach to hiding the  element from the DOM using the <code>*ngIf</code> directive?  Do I need to get another property from the <code>nativeElement</code>?</p>
  
  <p>Thanks!</p>