Using ngIF in Ionic 3

Question

I used to use ngshow when I wanted to hide or show divs in ionic 1.

I'm using ionic 3 and I'm trying to make the button do nothing (no click event) if the indexCount == 0.

I currently have...

<div ng-if=" indexCount == 0">
<button ion-button class="previous"> Previous </button>

<div ng-if=" indexCount != 0">
 <button ion-button class="next" (click)="previousButtonClick"> Next 
</button>

Solution 1

I think that you want to disable or hide the 'previous' button on the page with indexCount == 0 and disable/hide 'next' button on the last page indexCount == length - 1 where length is the number of pages.

You can either disable a button for consistent layout

<button [disabled]="indexCount == 0" ion-button class="previous">Previous</button>
<button [disabled]="indexCount >= length - 1" ion-button class="next" (click)="previousButtonClick()">Next</button>

or remove it with *ngIf

<button *ngIf="indexCount != 0" ion-button class="previous">Previous</button>
<button *ngIf="indexCount < length - 1" ion-button class="next" (click)="previousButtonClick()">Next</button>

Note that [disabled] prevents click events firing.

Solution 2

As of Angular2 you need to use *ngIf, you can see an example here.
Example:

<div *ngIf=" indexCount == 0">
  <button ion-button class="previous"> Previous </button>
</div>
<div *ngIf=" indexCount != 0">
  <button ion-button class="next" (click)="previousButtonClick">
    Next 
 </button>
</div>

Solution 3

An alternative way of doing this could be to add a condition on the button's function in the .ts file. On the template file:

<button ion-button (click)='myButtonAction()>Previous</button>

On the .ts file:

    myButtonAction(){
        if(this.indexCount == 0){
             console.log('No Action');
        } else {
             // Previous Button Desired Action
             // eg NavCtrl action or change value to trigger *ngIf update etc
        }
    }

Solution 4

For this situation you can also use the ng-template.

Exemple:

<ng-template #thenTemplateClick>
  <button ion-button class="next" (click)="previousButtonClick()">
    Next 
  </button>
</ng-template>

<ng-template #elseTemplateClick>
  <button ion-button class="previous"> Previous </button>
</ng-template>

View more solutions