Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you toggle show/hide in ng-template on Angular?

This is what I tried, and of course it makes visible all the items:

<ng-template let-file let-i="index" pTemplate="file">
  <div class="ui-fileupload-row">
    <div><img [src]="file.objectURL" width="50"/></div>
    <div>{{file.name}}</div>
    <div>{{formatSize(file.size)}}</div>
    <div><button (click)="toggleIsFormVisible()">Add metadata <i class="fa fa-plus"></i></button></div>
  </div>
  <div *ngIf="isFormVisible"></div>
</ng-template>

toggleIsFormVisible()
{
    this.isFormVisible = !this.isFormVisible;
}

How do you do this knowing only the index, and without duplicating the items?

like image 413
Gerald Hughes Avatar asked Nov 08 '22 10:11

Gerald Hughes


1 Answers

  1. this.isFormVisible
  2. ngIf="IsFormVisible"

The issue is with capitalized i letter.

like image 73
Vesell11 Avatar answered Nov 15 '22 08:11

Vesell11