How to show hide buttons in angular4

Question

I am new to angular, so I have an edit button on clicking which I need to show two buttons ie 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.

Answer 1

Simply replace

[disabled]="condition"

By

*ngIf="condition"

Answer 2

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;