[hidden] does not work on any elements including class="glyphicon"

[hongbo-miao]

I am not sure I should report here or Angular 2 github. Let me know if this is not the place to report. Thanks

[hidden] does not work on any elements including class="glyphicon".

This cannot hide, so not works
<span [hidden]="true" class="glyphicon glyphicon-plus-sign"></span>

This can hide, works well
<span [hidden]="true">test</span>

[hongbo-miao]

[hidden] also does not work on any elements including class="help-block".

<div class="form-group" [ngClass]="{'has-error':nameHasError}">
    <label class="control-label" for="name">Name</label>
    <input type="text" id="name" [(ngModel)]="name" class="form-control input-sm"/>
    <span class="help-block" [hidden]="!nameHasError">Please input your name.</span>
</div>

[hongbo-miao]

Refer to angular/angular#7300

[valorkin]

@hongbo-miao can not hide? add *ngIf
why not?

[hongbo-miao]

@valorkin Because I read from here..

It's important to know the difference between the hidden attribute and ngIf directive. While hidden shows and hides a DOM element that is already rendered, ngIf adds or removes an element from the DOM, making it both heavier and slower. It makes sense to use ngIf if the decision to show or hide some part of the UI is made during page loading.

Right now I am using a temporary way, adding this in the main.css

[hidden] {
    display: none;
}

[edinfazlic]

I think you can also use ngClass to achieve your goal:

BS3 (hidden):
http://getbootstrap.com/css/#helper-classes-show-hide

BS4 (hidden-xs-up):
http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

[hongbo-miao]

@edinfazlic that is a good alternative way! thanks

[hongbo-miao]

@valorkin Right now I think this is not related with ng2-bootstrap at all, it is bootstrap thing. Thanks for your time!