When you need to hide an icon on a webpage

/ starwavelin

In AngularJS, I have been using the two directives ng-show and ng-hide quite often to toggle the show/hidden of an icon. The problem of using these two directives sometimes is that HTML interpreting the icon being hidden as  . If you need a particular icon (wider than  ) to fit in the position, you probably don’t want a simply hidden and   substitution to screw it up. Therefore, it is time for ng-class with css visibility to come in.

In a plain HTML/CSS, the following code would hide a icon item, assuming font-awesome is used.

In HTML
<i class="fa fa-fw fa-lg fa-check" class="invisible"></i>

In CSS, invisible class is defined as


.invisible {
  visibility: hidden;    
}

Then, the problem has been simplified to use a certain logic to toggle the css style “invisible” in the class attribute. Assuming we are in the scenario of a customer submitting an order and the icon’s show/hidden depends on whether that order has a customer’s comment associated with (show: order has a commnet; hidden: order doesn’t have a comment). Then, we can rewrite the HTML part using ng-class as follows:

<i class="fa fa-fw fa-lg fa-check" ng-class="{invisible: !order.Comment}"></i>

Basically, I just learned two points

  1. ng-class="{property: a_bool_function}"
  2. invisible means an icon is always there occupying that large space it declares and unseen.

Awesome!

Leave a comment