Merge pull request #38 from IEvangelist/master

Used *ngIf instead of [hidden] binding
dougludlow · Apr 20, 2016 · 835c238 · 835c238
2 parents 4cd5f71 + 0b50839
commit 835c238
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 10 deletions.
diff --git a/demo/modal-demo.component.html b/demo/modal-demo.component.html
@@ -12,7 +12,7 @@ <h1>Modal</h1>
         <button type="button" class="btn btn-default" (click)="animationsEnabled = !animationsEnabled">Toggle Animation ({{ animationsEnabled }})</button>
         <button type="button" class="btn btn-default" (click)="open()">Open from component</button>
     </p>
-    <p [hidden]="!selected">Selection from modal: {{ selected }}</p>
+    <p *ngIf="selected">Selection from modal: {{ selected }}</p>
 
     <modal [animation]="animationsEnabled" (onClose)="closed()" (onDismiss)="dismissed()" #modal>
         <modal-header [show-close]="true">
@@ -52,8 +52,8 @@ <h4 class="modal-title">I'm a modal!</h4>
             <p>I will navigate to another route when you close the modal.</p>
         </modal-body>
         <modal-footer>
-            <button type="button" class="btn btn-default" data-dismiss="modal" (click)="navigateModal.dismiss()" [hidden]="!showDefaultButtons">Close</button>
-            <button type="button" class="btn btn-primary" autofocus (click)="navigateModal.close()" [hidden]="!showDefaultButtons">Go</button>
+            <button *ngIf="showDefaultButtons" type="button" class="btn btn-default" data-dismiss="modal" (click)="navigateModal.dismiss()">Close</button>
+            <button *ngIf="showDefaultButtons" type="button" class="btn btn-primary" autofocus (click)="navigateModal.close()">Go</button>
         </modal-footer>
     </modal>
 </section>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng2-bs3-modal",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Angular2 Boostrap3 Modal Component",
   "main": "ng2-bs3-modal.js",
   "scripts": {

diff --git a/src/ng2-bs3-modal/components/modal-footer.ts b/src/ng2-bs3-modal/components/modal-footer.ts
@@ -3,14 +3,11 @@ import { ModalComponent } from './modal';
 
 @Component({
     selector: 'modal-footer',
-    styles: [`
-        .btn[hidden] { display: none; }
-    `],
     template: `
         <div class="modal-footer">
             <ng-content></ng-content>
-            <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modal.dismiss()" [hidden]="!showDefaultButtons">Close</button>
-            <button type="button" class="btn btn-primary" (click)="modal.close()" [hidden]="!showDefaultButtons">Save</button>
+            <button *ngIf="showDefaultButtons" type="button" class="btn btn-default" data-dismiss="modal" (click)="modal.dismiss()">Close</button>
+            <button *ngIf="showDefaultButtons" type="button" class="btn btn-primary" (click)="modal.close()">Save</button>
         </div>
     `
 })

diff --git a/src/ng2-bs3-modal/components/modal-header.ts b/src/ng2-bs3-modal/components/modal-header.ts
@@ -5,7 +5,9 @@ import { ModalComponent } from './modal';
     selector: 'modal-header',
     template: `
         <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss()" [hidden]="!showClose"><span aria-hidden="true">&times;</span></button>
+            <button *ngIf="showClose" type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss()">
+                <span aria-hidden="true">&times;</span>
+            </button>
             <ng-content></ng-content>
         </div>
     `