fix(ie9,10): usage of [hidden] replaced with *ngIf (fixes #238)

components/carousel/carousel.component.ts

@@ -10,20 +10,20 @@ export enum Direction {UNKNOWN, NEXT, PREV}
 
 const NAVIGATION:any = {
   [Ng2BootstrapTheme.BS4]: `
-    <a class="left carousel-control" (click)="prev()" [hidden]="!slides.length">
+    <a class="left carousel-control" (click)="prev()" *ngIf="slides.length">
       <span class="icon-prev" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
     </a>
-    <a class="right carousel-control" (click)="next()" [hidden]="!slides.length">
+    <a class="right carousel-control" (click)="next()" *ngIf="slides.length">
       <span class="icon-next" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
     </a>
   `,
   [Ng2BootstrapTheme.BS3]: `
-    <a class="left carousel-control" (click)="prev()" [hidden]="!slides.length">
+    <a class="left carousel-control" (click)="prev()" *ngIf="slides.length">
       <span class="glyphicon glyphicon-chevron-left"></span>
     </a>
-    <a class="right carousel-control" (click)="next()" [hidden]="!slides.length">
+    <a class="right carousel-control" (click)="next()" *ngIf="slides.length">
       <span class="glyphicon glyphicon-chevron-right"></span>
     </a>
   `
@@ -36,7 +36,7 @@ const NAVIGATION:any = {
   directives: [NgFor],
   template: `
     <div (mouseenter)="pause()" (mouseleave)="play()" class="carousel slide">
-      <ol class="carousel-indicators" [hidden]="slides.length <= 1">
+      <ol class="carousel-indicators" *ngIf="slides.length > 1">
          <li *ngFor="#slidez of slides" [class.active]="slidez.active === true" (click)="select(slidez)"></li>
       </ol>
       <div class="carousel-inner"><ng-content></ng-content></div>

components/datepicker/datepicker-inner.ts

@@ -41,7 +41,7 @@ const KEYS = {
   selector: 'datepicker-inner',
   events: ['update'],
   template: `
-    <div [hidden]="!datepickerMode" class="well well-sm bg-faded p-a card" role="application" ><!--&lt;!&ndash;ng-keydown="keydown($event)"&ndash;&gt;-->
+    <div *ngIf="datepickerMode" class="well well-sm bg-faded p-a card" role="application" ><!--&lt;!&ndash;ng-keydown="keydown($event)"&ndash;&gt;-->
       <ng-content></ng-content>
     </div>
   `,

components/datepicker/daypicker.ts

@@ -11,7 +11,7 @@ const TEMPLATE_OPTIONS:any = {
         <th *ngFor="#labelz of labels" class="text-xs-center"><small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small></th>
     `,
     WEEK_ROW: `
-        <td [hidden]="!datePicker.showWeeks" class="text-xs-center h6"><em>{{ weekNumbers[index] }}</em></td>
+        <td *ngIf="datePicker.showWeeks" class="text-xs-center h6"><em>{{ weekNumbers[index] }}</em></td>
         <td *ngFor="#dtz of rowz" class="text-xs-center" role="gridcell" [id]="dtz.uid">
           <button type="button" style="min-width:100%;" class="btn btn-sm {{dtz.customClass}}"
                   *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
@@ -30,7 +30,7 @@ const TEMPLATE_OPTIONS:any = {
         <th *ngFor="#labelz of labels" class="text-center"><small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small></th>
     `,
     WEEK_ROW: `
-        <td [hidden]="!datePicker.showWeeks" class="text-center h6"><em>{{ weekNumbers[index] }}</em></td>
+        <td *ngIf="datePicker.showWeeks" class="text-center h6"><em>{{ weekNumbers[index] }}</em></td>
         <td *ngFor="#dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
           <button type="button" style="min-width:100%;" class="btn btn-default btn-sm {{dtz.customClass}}"
                   *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
@@ -55,7 +55,7 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme ||
 @Component({
   selector: 'daypicker, [daypicker]',
   template: `
-<table [hidden]="datePicker.datepickerMode!=='day'" role="grid" aria-labelledby="uniqueId+'-title'" aria-activedescendant="activeDateId">
+<table *ngIf="datePicker.datepickerMode==='day'" role="grid" aria-labelledby="uniqueId+'-title'" aria-activedescendant="activeDateId">
   <thead>
     <tr>
       <th>
@@ -79,7 +79,7 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme ||
       </th>
     </tr>
     <tr>
-      <th [hidden]="!datePicker.showWeeks"></th>
+      <th *ngIf="datePicker.showWeeks"></th>
       ${CURRENT_THEME_TEMPLATE.DAY_TITLE}
     </tr>
   </thead>

components/datepicker/monthpicker.ts

@@ -37,7 +37,7 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] ||
 @Component({
   selector: 'monthpicker, [monthpicker]',
     template: `
-<table [hidden]="datePicker.datepickerMode!=='month'" role="grid">
+<table *ngIf="datePicker.datepickerMode==='month'" role="grid">
   <thead>
     <tr>
       <th>

components/datepicker/yearpicker.ts

@@ -40,7 +40,7 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] ||
 @Component({
   selector: 'yearpicker, [yearpicker]',
     template: `
-<table [hidden]="datePicker.datepickerMode!=='year'" role="grid">
+<table *ngIf="datePicker.datepickerMode==='year'" role="grid">
   <thead>
     <tr>
       <th>

components/tabs/tabset.component.ts

@@ -15,7 +15,7 @@ import {Tab} from './tab.directive';
             [class.active]="tabz.active" [class.disabled]="tabz.disabled"
             (click)="tabz.active = true">
             <span [ngTransclude]="tabz.headingRef">{{tabz.heading}}</span>
-            <span [hidden]="!tabz.removable">
+            <span *ngIf="tabz.removable">
               <span (click)="$event.preventDefault(); removeTab(tabz);" class="glyphicon glyphicon-remove-circle"></span>
             </span>
           </a>

components/timepicker/timepicker.component.ts

@@ -59,7 +59,7 @@ function addMinutes(date:any, minutes:number) {
           <td><a (click)="incrementHours()" [ngClass]="{disabled: noIncrementHours()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
           <td>&nbsp;</td>
           <td><a (click)="incrementMinutes()" [ngClass]="{disabled: noIncrementMinutes()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
-          <td [ngClass]="{hidden: !showMeridian}" [hidden]="!showMeridian"></td>
+          <td [ngClass]="{hidden: !showMeridian}" *ngIf="showMeridian"></td>
         </tr>
         <tr>
           <td class="form-group" [ngClass]="{'has-error': invalidHours}">
@@ -69,13 +69,13 @@ function addMinutes(date:any, minutes:number) {
           <td class="form-group" [ngClass]="{'has-error': invalidMinutes}">
             <input style="width:50px;" type="text" [(ngModel)]="minutes" (change)="updateMinutes()" class="form-control text-center" [readonly]="readonlyInput" (blur)="minutesOnBlur($event)" maxlength="2">
           </td>
-          <td [ngClass]="{hidden: !showMeridian}" [hidden]="!showMeridian"><button type="button" [ngClass]="{disabled: noToggleMeridian()}" class="btn btn-default text-center" (click)="toggleMeridian()">{{meridian}}</button></td>
+          <td [ngClass]="{hidden: !showMeridian}" *ngIf="showMeridian"><button type="button" [ngClass]="{disabled: noToggleMeridian()}" class="btn btn-default text-center" (click)="toggleMeridian()">{{meridian}}</button></td>
         </tr>
         <tr class="text-center" [ngClass]="{hidden: !showSpinners}">
           <td><a (click)="decrementHours()" [ngClass]="{disabled: noDecrementHours()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
           <td>&nbsp;</td>
           <td><a (click)="decrementMinutes()" [ngClass]="{disabled: noDecrementMinutes()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
-          <td [ngClass]="{hidden: !showMeridian}" [hidden]="!showMeridian"></td>
+          <td [ngClass]="{hidden: !showMeridian}" *ngIf="showMeridian"></td>
         </tr>
       </tbody>
     </table>

demo/components/progressbar/progressbar-demo-bs4.html

@@ -22,7 +22,7 @@
 
 <small><em>Object (changes type based on value)</em></small>
 <progress class="progress progress-striped progress-animated active progress-{{ type }}" [value]="dynamic" [max]="max">
-  {{type}} <i [hidden]="!showWarning">!!! Watch out !!!</i>
+  {{type}} <i *ngIf="showWarning">!!! Watch out !!!</i>
 </progress>
 
 <hr />
@@ -34,7 +34,7 @@
             style="float: left;"
             [ngStyle]="{width: baz.value + '%'}"
             [value]="baz.value" [max]="baz.max">
-    <span [hidden]="baz.value < 5">{{baz?.value}}%</span>
+    <span *ngIf="baz.value > 3">{{baz?.value}}%</span>
   </progress>
   <!-- gray background -->
   <progress class="progress" value="0" max="100" style="width: 100%;"></progress>

demo/components/progressbar/progressbar-demo.html

@@ -22,7 +22,7 @@
 <progressbar [animate]="false" [value]="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>
 
 <small><em>Object (changes type based on value)</em></small>
-<progressbar class="progress-striped active" [value]="dynamic" [type]="type">{{type}} <i [hidden]="!showWarning">!!!
+<progressbar class="progress-striped active" [value]="dynamic" [type]="type">{{type}} <i *ngIf="showWarning">!!!
   Watch out !!!</i></progressbar>
 
 <hr/>
@@ -31,6 +31,6 @@
 </h3>
 <bs-progress>
   <bar *ngFor="#baz of stacked" [value]="baz.value" [type]="baz?.type">
-    <span [hidden]="baz.value < 5">{{baz?.value}}%</span>
+    <span *ngIf="baz.value > 5">{{baz?.value}}%</span>
   </bar>
 </bs-progress>

demo/components/typeahead/typeahead-demo.html

@@ -17,10 +17,10 @@
            [typeaheadOptionsLimit]="7"
            placeholder="Locations loaded with timeout"
            class="form-control">
-    <div [hidden]="typeaheadLoading!==true">
+    <div *ngIf="typeaheadLoading===true">
         <i class="glyphicon glyphicon-refresh ng-hide" style=""></i>
     </div>
-    <div [hidden]="typeaheadNoResults!==true" class="" style="">
+    <div *ngIf="typeaheadNoResults===true" class="" style="">
         <i class="glyphicon glyphicon-remove"></i> No Results Found
     </div>
 </div>