title: Angular Hidden Ignores
body: <p>I am trying to use the Hidden property in Angular2 and when I include a style that alters the display of the DIV, the hidden property is ignored.</p>
  
  <p>When the code below is run, both divs are displayed.
  When I remove the class .displayInline the first DIV is hidden and the second is displayed (as expected).</p>
  
  <p>Can I use Hidden and the display CSS together?</p>
  
  <pre><code>import {ComponentAnnotation as Component, ViewAnnotation as View, bootstrap, NgIf} from 'angular2/angular2';
  
  @Component({
      selector: 'hello'
  })
  @View({
      template: `&lt;style&gt;.displayInline{ display:inline }&lt;/style&gt;&lt;span *ng-if="name"&gt;Hello, {{name}}!&lt;/span&gt;
      &lt;div&gt;
                  &lt;div [hidden]="hideDiv1()" class="displayInline"&gt;should be hidden.&lt;/div&gt;
                  &lt;div [hidden]="hideDiv2()" class="displayInline"&gt;should be displayed.&lt;/div&gt;
      &lt;/div&gt;`,
      directives: [NgIf]
  })
  export class Hello {
      name: string = 'World';
      constructor() {
          setTimeout(() =&gt; {
            this.name = 'NEW World'
          }, 2000);
      }
  
      hideDiv1(){
          return true;
      }   
  
      hideDiv2(){
          return false;
      }
  }
  
  bootstrap(Hello);
  </code></pre>
  
  <p>Repository:<a href="https://github.com/albi000/ng2-play">https://github.com/albi000/ng2-play</a></p>