Ion-list [inset]="true" not working as expected

[iOSDev33]

I am trying to use the ion-list using [inset]=“true”. It works fine if I create static ion-items inside the list but if I load the items dynamically from the an array I get vertical spaces between the items.

Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css']
})
export class ExampleComponent {
  alerts: string[] = ["Pokémon Yellow", "Mega Man X", "The Legend of Zelda", "Pac-Man", "Super Mario World"]
 }

Template

<ion-content color="light">
  <ion-list [inset]="true" *ngFor="let alert of alerts">
    <ion-item button>
      <ion-label>{{ alert }}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

[JDMIonic]

@iOSDev33

[inset]="true"

it’s inset="true" not [inset]="true". [...] is used around attribs when binding to them.

[iOSDev33]

Thanks for the reply, Unfortunately that makes no difference as far fixing the issue with the vertical spacing. In addition the docs say [inset]=“true”.

ion-list | Ionic Documentation

[iOSDev33]

Actually just got it figured out. I needed to put the *ngFor inside the ion-item tag instead of the
ion-list tag.

<ion-content color="light">
  <ion-list [inset]="true">
    <ion-item button *ngFor="let alert of alerts">
      <ion-label>{{ alert }}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>