Clever Geek Handbook

Angular 2 - Click to change form fields.

I want to replace the label with an input text box and vice versa by clicking a button in Angular 2. I know I need to use ngIf somekind, but I'm a little confused on how to do it.

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>
+3


source to share


1 answer


The only thing you need to add to one of yours *ngIf

is an exclamation mark:

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


which means the label is displayed when it editMode

is false. The exclamation point is a NOT operator that is used to test whether a variable is true. More details here: What does the exclamation mark in front of a variable mean in JavaScript

+1


source






More articles: