How to display item at particular index and then after every fifth element in angular 2+

Question

I have an array of channels. I am using *ngFor for looping the array of channels.

<ng-container *ngFor="let channel of channelList; let i = index">

     // display below code at index 3 and then after every 5th item
      <ng-container *ngIf="i==3">
        <div class="slide pa1" >
          <a class="link bg-center relative" >
            <div class="c-ban relative" style="height: 168px !important;">
              <app-google-ads></app-google-ads>
            </div>
          </a>
        </div>
      </ng-container>
    
  </ng-container> 

Here I have displayed the content at index 3. But how can I display the content after evert fifth element. For instance, the item is displayed at index 3, then I want to display content at index 8 and then at index 13 ... (after every fifth element).

Answer 1

You could do the following. Working out the remainder when you divide by 5 and then - 3 to get the desired offset.

<ng-container *ngIf="(i % 5) - 3 == 0">
    <div class="slide pa1" >
      <a class="link bg-center relative" >
        <div class="c-ban relative" style="height: 168px !important;">
          <app-google-ads></app-google-ads>
        </div>
      </a>
    </div>
  </ng-container>