5

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>
pPeter
  • 81
  • 1
  • 2
  • 8
  • This looks good, what's the current situation? – Tatsuyuki Ishi Apr 02 '17 at 14:01
  • Replace with what? – Roman C Apr 02 '17 at 14:23
  • What i want is the answer on this question. http://stackoverflow.com/questions/37404746/replacing-label-with-input-textbox-and-vice-versa-by-clicking-a-button-in-angula But that is angular 1 and i am using angular 2 and ng-show and ng-hide is not part of angular 2 – pPeter Apr 02 '17 at 17:01

1 Answers1

4

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

Community
  • 1
  • 1
AT82
  • 71,416
  • 24
  • 140
  • 167
  • I tried that, and that gave me: https://plnkr.co/edit/B6o0yydz0iUEVSKKjY4c?p=preview What i want is to change the name label to a input field when pressing the edit button – pPeter Apr 02 '17 at 17:31
  • Well, you are using `ng-show` and `ng-hide`. You are supposed to use *ngIf like you have in your question :) – AT82 Apr 02 '17 at 17:34
  • @VarunBalachanthiran that's not a valid plunker, here's a plunker of what AJT_82 means: https://plnkr.co/edit/U1poqbiD8uLmk4Bw8AOM – eko Apr 02 '17 at 17:35
  • Oh, your right, sorry, it works now. Thank you very much :) – pPeter Apr 02 '17 at 17:36
  • @VarunBalachanthiran you can/should accept an answer if it helped you solving your issue: https://meta.stackexchange.com/a/135826/346766 – eko Apr 02 '17 at 17:37
  • 1
    @echonax Thanks man, I was just about to a plunker myself, but you, sir, were very kind! :P – AT82 Apr 02 '17 at 17:38
  • 1
    @AJT_82 :D no problem! – eko Apr 02 '17 at 17:39