CODEWITHSUNDEEP
angularuibuttonangular4-formsangular-forms
iymrahul
iymrahul

Reputation: 94

How to show hide buttons in angular4

I am new to angular, so I have an edit button on clicking which I need to show two buttons i.e save and cancel buttons and hide the edit button. And on clicking cancel, I need to show only edit button. I am stuck in toggling this through angular and ngIF.

Here is my buttons code in form:

<button id="editBtn" type="button" data-dismiss="modal" (click)="isValid=!isValid" class="btn modal-btn btn-default" [disabled]="isValid">Edit</button>
                                <button id="submitBtn" [disabled]="!isValid" type="button" data-dismiss="modal" class="btn modal-btn btn-default"[disabled]="!isValid" >Submit</button>
                                <button id="Cancel"  type="button" (click)="isValid=!isValid" data-dismiss="modal" class="btn modal-btn btn-default" [disabled]="!isValid">Cancel</button>

Earlier I was using [disabled] but now I need to show /hide.

Upvotes: 0

Views: 19580

Answers (2)

Ashraful Islam
Ashraful Islam

Reputation: 1263

In template 

<button (click)="enableEdit = true">Edit</button>  
<button *ngIf="enableEdit">Save</button>  
<button *ngIf="enableEdit" (click)="enableEdit=false">Cancel</button>

In .ts file 

enableEdit: boolean = false;

Upvotes: 3

user4676340
user4676340

Reputation:

Simply replace 

[disabled]="condition"

By 

*ngIf="condition"

Upvotes: 6

Related Questions