Angular 2 [hidden] does not seem to be working?

Question

My component is defined this way:

import { Component } from 'angular2/core'  @Component({     selector: 'sidebar',     templateUrl: 'js/app/views/sidebar.html', }) export class SidebarComponent {     public sections: boolean[] = [         true,         false,         false,         false,         false,         false,         false,         false     ]; } 

The sidebar.html template:

<h3 class="proofTitle">...</h3> <p [hidden]="sections[0]">     ... </p> <p [hidden]="sections[1]">     ... </p> ... <p [hidden]="sections[7]">     ... </p> 

Seems pretty straight forward, but for some reason, it's showing all of the sections... what am I missing?

Answer 1

Check that you don't have any display css rule on your <p> tags that would override the hidden behavior like:

p {   display: inline-block !important; } 

Because the hidden html attribute behaves like display: none

Answer 2

Just add this code:

p[hidden] { display: none; } 

to your styles.css file.