ngIf list only on one section in ngFor

Question

I am using Angular8 and have an ngFor to display an array of people.

This is the Array

private myArray: {}[] =
    [
        {
            "name": "name1",
            "description": "description goes here",
        },
        {
            "serviceName": "name2",
            "description": "description goes here",
        }
    ]

This is the HTML

<div class="content" *ngFor="let details of myArray">
    <h2>{{details.name}}</h2>
    <div class="description">{{details.description}}</div>

    <ul *ngIf="isName1">
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item1</span>
        </li>
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item2</span>
        </li>
    </ul>
</div>

I have a foreach loop which loops through the array and changes isName1 to true if it is the first in the array.

this.myArray.forEach(s => {

  if(name === 'name1') {
    this.isName1 = true;
  }
});

What I am trying to do is to get the ul to only show for the first element but not the 2nd, yet it is coming up for both. Is there any way to achieve this? Thanks

score 3 · Answer 1 · answered Sep 18 '19 at 12:23

Consider using ng-template

The beauty of using is it will not be shown in HTML (as inline or block element).

Sample Code:

<div class="content" *ngFor="let details of myArray">
    <h2>{{details.name}}</h2>
    <div class="description">{{details.description}}</div>

    <ul>
    <ng-template [ngIf]="isName1">
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item1</span>
        </li>
      </ng-template>
      <ng-template [ngIf]="!isName1">
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item2</span>
        </li>
      </ng-template>
    </ul>
</div>

score 2 · Accepted Answer · answered Sep 18 '19 at 12:55

2

If you always want to just apply the condition to first element, despite of the value, you can use first, which is provided by angular in *ngFor. So there is then no need to use the forEach loop:

<div class="content" *ngFor="let details of myArray; let first = first">
  <h2>{{details.name}}</h2>
  <div class="description">{{details.description}}</div>

  <ul *ngIf="first">
    <li>
      <i class="fa fa-check-circle"></i>
      <span>item1</span>
    </li>
    <li>
      <i class="fa fa-check-circle"></i>
      <span>item2</span>
    </li>
  </ul>
</div>

STACKBLITZ

answered Sep 18 '19 at 12:55

AT82

71,416
24
140
167

Thanks, I found this to work best. Is it also possible to use second and third if I want the next element to have another list? – DevStacker Sep 19 '19 at 11:50
Then I would suggest to look into the index of the items in the array, since ngFor just provides truthy values for first and last item in array. – AT82 Sep 19 '19 at 11:52

score 1 · Answer 3 · answered Sep 18 '19 at 12:22

<div class="content" *ngFor="let details of myArray">
    <h2>{{details.name}}</h2>
    <div class="description">{{details.description}}</div>

    <ul *ngIf="details.name === 'name1'">
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item1</span>
        </li>
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item2</span>
        </li>
    </ul>
</div>

score 1 · Answer 4 · answered Sep 18 '19 at 12:24

As far i understand you want to limit items in ngfor here is and important link

How can I limit ngFor repeat to some number of items in Angular?

So your code will look like

<ng-container *ngFor="let details of myArray;let i=index" >
<div class="content" *ngIf="i==0">
    <h2>{{details.name}}</h2>
    <div class="description">{{details.description}}</div>

    <ul >
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item1</span>
        </li>
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item2</span>
        </li>
    </ul>
</div>
</ng-container>

score 0 · Answer 5 · answered Sep 18 '19 at 12:18

0

Change if(name === 'name1') to if(s.name === 'name1')

s.name

Try like this:

this.myArray.forEach(s => {

  if(s.name === 'name1') {
    this.isName1 = true;
  }
});

answered Sep 18 '19 at 12:18

Adrita Sharma

21,581
10
69
79

ngIf list only on one section in ngFor

5 Answers5