fix(demo): fix template bindings (#2863)

demo/src/app/components/+alerts/alerts-section.component.html

@@ -60,7 +60,7 @@ <h3 routerLink="." fragment="additional-content" id="additional-content">Additio
 
   <!-- dismiss -->
   <h3 routerLink="." fragment="dismissing" id="dismissing">Dismissing</h3>
-  <p>Alerts have <code>dismiss</code> option. Enabling it will show close button
+  <p>Alerts have <code>dismissible</code> option. Enabling it will show close button
     to the right of the alert.</p>
   <ng-sample-box [ts]="demos.dismiss.component" [html]="demos.dismiss.html">
     <demo-alert-dismiss></demo-alert-dismiss>

demo/src/app/components/+alerts/demos/dismiss/dismiss.html

@@ -1,4 +1,4 @@
 <div *ngFor="let alert of alerts">
-  <alert [type]="alert.type" dismissible="true">{{ alert.msg }}</alert>
+  <alert [type]="alert.type" [dismissible]="true">{{ alert.msg }}</alert>
 </div>
 <button type="button" class="btn btn-primary" (click)="reset()">Reset</button>

demo/src/app/components/+dropdown/dropdown-section.component.html

@@ -13,7 +13,7 @@ <h2>Contents</h2>
         <li><a routerLink="." fragment="alignment">Menu alignment</a></li>
         <li><a routerLink="." fragment="nested">Nested dropdowns (experimental)</a></li>
         <li><a routerLink="." fragment="container-body">Append to body</a></li>
-        <li><a routerLink="." fragment="keyboard">Single button with keyboard nav</a></li>
+        <!--<li><a routerLink="." fragment="keyboard">Single button with keyboard nav</a></li>-->
         <li><a routerLink="." fragment="dropup">Dropup variation</a></li>
         <li><a routerLink="." fragment="config">Configuring defaults</a></li>
       </ul>

demo/src/app/components/+modal/demos/nested/nested.html

@@ -25,7 +25,7 @@ <h4 class="modal-title pull-left">Second modal</h4>
         </button>
       </div>
       <div class="modal-body">
-        This is static modal <br>
+        This is second modal <br>
         <button type="button" class="btn btn-primary" (click)="thirdModal.show()">Open third modal</button>
       </div>
     </div>
@@ -42,7 +42,7 @@ <h4 class="modal-title pull-left">Third modal</h4>
         </button>
       </div>
       <div class="modal-body">
-        This is static modal <br>
+        This is third modal <br>
         Click <b>&times;</b> to close modal.
       </div>
     </div>

demo/src/app/components/+pagination/demos/pager/pager.html

@@ -14,7 +14,7 @@
       [(ngModel)]="currentPage"
       (pageChanged)="pageChanged($event)"
       pageBtnClass="btn"
-      itemsPerPage="10"
+      [itemsPerPage]="10"
       class="pull-left">
     </pager>
   </div>

demo/src/app/components/+pagination/demos/styling-global/styling-global.html

@@ -4,6 +4,6 @@
 </div>
 
 <div class="col-md-6">
-  <pager [totalItems]="totalItems" [(ngModel)]="currentPage" (pageChanged)="pageChanged($event)" itemsPerPage="10"
+  <pager [totalItems]="totalItems" [(ngModel)]="currentPage" (pageChanged)="pageChanged($event)" [itemsPerPage]="10"
          pageBtnClass="btn-custom"></pager>
 </div>

demo/src/app/components/+progressbar/demos/bs3/config/config.html

@@ -1 +1 @@
-<progressbar class="progress-striped active"  value="136" type="danger"><i>136 / 150</i></progressbar>
+<progressbar class="progress-striped active"  [value]="136" type="danger"><i>136 / 150</i></progressbar>

demo/src/app/components/+progressbar/demos/bs3/stacked/stacked.html

@@ -1,5 +1,5 @@
 <div class="row col-lg-12">
-  <progressbar class="progress" [value]="stacked" max="100"></progressbar>
+  <progressbar class="progress" [value]="stacked" [max]="100"></progressbar>
 </div>
 <br>
 <div class="row col-md-12">

demo/src/app/components/+progressbar/demos/bs3/static/static.html

@@ -1,11 +1,11 @@
 <div class="row">
   <div class="col-sm-4">
-    <progressbar value="55"></progressbar>
+    <progressbar [value]="55"></progressbar>
   </div>
   <div class="col-sm-4">
-    <progressbar class="progress-striped" value="22" type="warning">22%</progressbar>
+    <progressbar class="progress-striped" [value]="22" type="warning">22%</progressbar>
   </div>
   <div class="col-sm-4">
-    <progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></progressbar>
+    <progressbar class="progress-striped active" max="200" [value]="166" type="danger"><i>166 / 200</i></progressbar>
   </div>
 </div>

demo/src/app/components/+progressbar/demos/bs4/dynamic/dynamic.html

@@ -9,5 +9,5 @@
 <progressbar class="progress progress-striped progress-animated" [value]="dynamic" [max]="max" [type]="type">
   {{type}} <i *ngIf="showWarning">!!! Watch out !!!</i>
 </progressbar>
-
+<br>
 <button type="button" class="btn btn-sm btn-primary" (click)="random()">Randomize</button>

demo/src/app/components/+progressbar/demos/bs4/stacked/stacked.html

@@ -1,5 +1,5 @@
 <div class="row col-lg-12">
-  <progressbar class="progress" [value]="stacked" max="100"></progressbar>
+  <progressbar class="progress" [value]="stacked" [max]="100"></progressbar>
 </div>
 <br>
 <div class="row col-md-12">

demo/src/app/components/+progressbar/demos/bs4/static/static.html

@@ -1,11 +1,11 @@
 <div class="row">
   <div class="col-sm-4">
-    <progressbar class="progress" value="55" max="100"></progressbar>
+    <progressbar class="progress" [value]="55" [max]="100"></progressbar>
   </div>
   <div class="col-sm-4">
-    <progressbar class="progress progress-striped" value="22" max="100" type="warning">22%</progressbar>
+    <progressbar class="progress progress-striped" [value]="22" [max]="100" type="warning">22%</progressbar>
   </div>
   <div class="col-sm-4">
-    <progressbar class="progress progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></progressbar>
+    <progressbar class="progress progress-striped active" [max]="200" [value]="166" type="danger"><i>166 / 200</i></progressbar>
   </div>
 </div>

demo/src/app/components/+rating/demos/custom/custom.html

@@ -1,11 +1,11 @@
 <div>
-  <rating max="10" [(ngModel)]="x" [customTemplate]="t" style="color: #0275d8;font-size: 20px;"></rating>
+  <rating [max]="10" [(ngModel)]="x" [customTemplate]="t" style="color: #0275d8;font-size: 20px;"></rating>
   <b>(<i>Rate:</i> {{x}})</b>
   <ng-template #t let-index="index" let-value="value">{{index < value ? '&#9745;' : '&#9744;'}}</ng-template>
 </div>
 
 <div>
-  <rating max="10" [(ngModel)]="y" [customTemplate]="tt"></rating>
+  <rating [max]="10" [(ngModel)]="y" [customTemplate]="tt"></rating>
   <b>(<i>Rate:</i> {{y}})</b>
   <ng-template #tt let-i="index" let-v="value">
     <button class="btn btn-{{i < v ? 'warning' : 'default'}}">

demo/src/app/components/+tabs/demos/manual/manual.html

@@ -14,7 +14,7 @@
     <tab heading="Static title">Static content</tab>
     <tab heading="Static Title 1">Static content 1</tab>
     <tab heading="Static Title 2">Static content 2</tab>
-    <tab heading="Static Title 3" removable="true">Static content 3</tab>
+    <tab heading="Static Title 3" [removable]="true">Static content 3</tab>
   </tabset>
 </div>
 

demo/src/app/components/+typeahead/demos/async/async.html

@@ -4,7 +4,7 @@
          (typeaheadLoading)="changeTypeaheadLoading($event)"
          (typeaheadNoResults)="changeTypeaheadNoResults($event)"
          (typeaheadOnSelect)="typeaheadOnSelect($event)"
-         typeaheadOptionsLimit="7"
+         [typeaheadOptionsLimit]="7"
          typeaheadOptionField="name"
          placeholder="Locations loaded with timeout"
          class="form-control">

demo/src/app/components/+typeahead/demos/in-form/in-form.html

@@ -3,8 +3,8 @@
 <form [formGroup]="myForm">
   <input formControlName="state"
          [typeahead]="states"
-         typeaheadOptionsLimit="7"
-         typeaheadMinLength="0"
+         [typeaheadOptionsLimit]="7"
+         [typeaheadMinLength]="0"
          placeholder="Typeahead inside a form"
          class="form-control">
 </form>