0

I have an Angular 2 app that displays a list of names in a table, with the right most column displaying a row of icons that are actions the user can choose. By selecting the edit icon, a popup will be displayed that allows them to edit that entry in the list. However, for certain names, I want to disable that option. Besides creating a second list of boolean values to hide and display the icons (Based on this SO answer), how can I go about this? I know for a fact only the first element should not be edited (as it is preloaded for the user), so using the answer in the link just seems like a bad solution.

user3334871
  • 1,251
  • 2
  • 14
  • 36

2 Answers2

1

If you know that it's only the first element in the list then you can use the index option in *ngFor described here in the documentation

<div *ngFor="let hero of heroes; let i=index;">
  ({{i}}) {{hero.name}}
  <ng-container *ngIf="i !== 0">
    Show edit
  </ng-container>
</div>

Live plunk

0mpurdy
  • 3,198
  • 1
  • 19
  • 28
  • I will try this, thanks! Never thought to use the index itself :) . Yes, the first element is global, and should always be present and never modified, as it is loaded into the list first, and the user shouldn't edit it. At time of submit, if that element isn't present, I validate it, and wonder what could have happened to modify this item :) . I will update this as the answer if it works when I test! – user3334871 Aug 07 '17 at 16:30
  • 1
    @user3334871 be aware: there was a mistake in the code (which I have now fixed) and there is now a live plunk to demo it – 0mpurdy Aug 07 '17 at 16:34
0

What 0mpurdy suggested is great, just wanted to bring to the attention, that you can also use first (here borrowing 0mpurdys code):

<div *ngFor="let hero of heroes; let first=first">
  {{hero.name}}
  <ng-container *ngIf="!first">
    Show edit
  </ng-container>
</div>
AT82
  • 71,416
  • 24
  • 140
  • 167