Insert item between ngFor loop

Question

I have the following code that displays the items

<ul>
<li *ngFor="#item of items">{{item}}</li>
</ul>

Now the items object is something that I get as a result of an http call to an API.

Let's say this is the following code.

this.http.get('/api/items').subscribe(data => {
      this.items= data['results'];
});

What I want to achieve is that I want the third Item to be a custom Item and then render the following items normally.

How can this be achived.

Thanks

Answer 1

You can keep track of the index of the *ngFor by using let i = index, you can then use a *ngIf to perform an action when the index is in position 3. See below, I used <pre></pre> because I have no idea what item is.

<ul>
    <li *ngFor="let item of items; let i = index">
        <pre *ngIf="i !== 2; then thenBlock else elseBlock"></pre>
    </li>
</ul>

<ng-template #thenBlock>{{item}}</ng-template>
<ng-template #elseBlock>//Display something for item 3</ng-template>

Your HttpGet is wrong though, I'm assuming you're using the new HttpClient, it should be:

this.http.get<any>('/api/items').subscribe((data: any) => {
      this.items = data;
});

If it's the old Http:

this.http.get('/api/items')
    .map((res: Response) => res.json())
    .subscribe((data: any) => {
        this.items = data;
     });