abrahamlinkedin abrahamlinkedin - 2 months ago 6
Javascript Question

Angular 2 *ngIf for 'this'

In Angular 2 I have this component.html:

<li *ngFor="let something of somethings">
<span>{{something}}</span>
<input class="doit" type="text" *ngIf="iscalled" />
<div id="container">
<button class="btn btn-warning editsection (click)="editAction()">Edit</button>
</div>
</li>


with this component.ts:

editAction(){ this.iscalled = true; }


iscalled
is, by default, set to false in my component.

Basically, for each
something
of
somethings
I produce, along with my list is an input field that is assigned to it, and a button that runs
editAction()
. The button is only there if the user clicks on the
editAction()
button.

Now, as is, clicking on the
editAction()
button will enable all input fields in my list. I would like to restrict this to the exact
li
element that it is meant for.

I don't know if Angular 2 has a specific action for this, or if this is a plain javascript solution.

Answer

NOTE: with this setup don't set default value of iscalled to false

<li *ngFor="let something of somethings">
     <span>{{something}}</span>
     <input class="doit" type="text" 
            *ngIf="something.iscalled" />       //<<<===changed

     <div id="container">
          <button class="btn btn-warning 
           editsection 
           (click)="editAction(something)">     //<<<===changed
              Edit
           </button>   
     </div>
</li>

editAction(something){ something.iscalled = true; }

if you want to toggle it then you can do following,

editAction(something){ something.iscalled != something.iscalled; }