removing and adding first item or last item in lists during ngFor

0
votes

I'm trying to create a list-group with list-group-items. However there is a CSS bug that angular creates when doing ngFor on the list-group items.

However I think angular provides each list-group-item the bootstrap class of: .list-group-item:last-child and .list-group-item:first-child. I see it in chrome developer tools and when I remove these classes, the list displays normally.

This creates a visual bug of having a more heavy border between the elements. Is there a way in angular to make this behave normally?

My code:

Component Template out on the side which contains list-group

  <div id='highlight-list-viewer' class="col-md-12">
    <div class="list-group">
      <app-game-item
        *ngFor="let game of games; let i = index"
        [game]="game"
        [index]="i"
      >

      </app-game-item>
    </div>
  </div>

Component template with the list-group-item

<a class="list-group-item list-group-item-action flex-column align-items-start" (click)="onGetHighlights()">
  ...STUFF
</a>
1
angularbootstrap-4

1 Answers

0
votes

I extracted the a href out to the outer template which fixed the problem. 

  <div id='highlight-list-viewer' class="col-md-12">
    <div class="list-group">
      <a class="list-group-item list-group-item-action flex-column align-items-start" *ngFor="let game of games">
      <app-game-item [game]="game">
      </app-game-item>
      </a>
    </div>
  </div>