CODEWITHSUNDEEP
angular
user3334871
user3334871

Reputation: 1361

Angular 2 hiding certain elements in a list

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.

Upvotes: 0

Views: 271

Answers (2)

AVJT82
AVJT82

Reputation: 73367

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>

Upvotes: 0

0mpurdy
0mpurdy

Reputation: 3353

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

Upvotes: 1

Related Questions