CODEWITHSUNDEEP
formsangular
pPeter
pPeter

Reputation: 81

Angular 2 - Click to edit form fields

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>

Upvotes: 5

Views: 8977

Answers (1)

AVJT82
AVJT82

Reputation: 73357

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

Upvotes: 4

Related Questions