Angular 2 - Click to edit form fields

Question

I want to replace label with input textbox and vice versa by clicking a button in Angular 2. I knowi have to use ngIf of somekind, but i am a little bit confused on how to do.

HTML:

<form>
<div class="information">
  <label *ngIf="editMode">{{textValue}}</label>
  <input *ngIf="editMode" [ngModel]="name">
  <button (click)="editMode=true">Edit</button>
  <button (click)="editMode=false">Save</button>
</div>
</form>

Answer 1

The only thing you need to add to one of your *ngIf's, is exclamation mark:

<label *ngIf="!editMode">{{textValue}}</label>

which means that label is shown when editMode is false. The exclamation mark is the NOT operator, which is used as truth tests on a variable. More here: What does an exclamation mark before a variable mean in JavaScript