CODEWITHSUNDEEP
angulartypescript
wintheradam123
wintheradam123

Reputation: 17

Make input field appear when clicking a button, in a *ngFor loop using *ngIf in Angular/TypeScript

My problem is that I cannot figure out how to use *ngIf when it is used in a *ngFor loop.

HTML:

<div *ngFor="let movie of movieList" class="movieRow">
<button (click)="onEdit()">click</button>
<div *ngIf="isEditEnable">
  <input />
</div>

TypeScript:

    isEditEnable: boolean = false;
    onEdit() {
    this.isEditEnable = !this.isEditEnable;
    }

When this is run, the boolean changes globally, for all of the movies in movieList, and therefore the input box appears for them all. I am trying to only make this appear for the clicked movie.

Should I use events, and if so, how should I do this?

Thanks.

Upvotes: 0

Views: 377

Answers (1)

Ali Nauman
Ali Nauman

Reputation: 1677

You are using a single isEditEnable property for all the movies. Clicking on the button for any the movies would toggle it and show the input field for each movie.

Instead, you should add a similar property to each movie item. Your *ngIf will become this:

*ngIf="movie.isEditEnable"

Upvotes: 2

Related Questions